如何在shadow dom中使用全局css样式

Question

Shadow

dom

封装了css样式，选择器不会跨越阴影边界。

问题： 如何在shadow dom中使用全局通用的css样式？
（假设有一些通用的CSS样式将在所有页面中使用（例如：font-family，h1，h2，clear，reset ...），如何使其在shadow dom中工作？）

Answer 1

我刚刚遇到了与原始问题相同的问题，即：为<h3>元素定义

once

一些全局规则，并在任何/许多

ShadowDOM

s中受益。

不，

css-variables

font不太适合这个东西，因为即使我已经定义了一次，比如说，

color

和

<h3>

变量，我仍然需要仔细检查每个和每个阴影样式表并添加使用它们的 CSS 规则。

在写这篇文章时（是的，我们现在已经是 2019 年了）

最短的标准化

解决方案确实是导入一些全球通用的 CSS。在 Chrome、Firefox 和 Anaheim（Chromium 上的 Edge）中完美运行。仍然需要在每个组件中添加

@import

规则，因此成本仍然很高（从编码/维护 POV 来看，样式表仅获取一次），但这是我们现在可以支付的最低价格。

Answer 2

现在是2022年了

ShadowDOM 的样式是：

<style>
在shadowDOM中
https://lamplightdev.com/blog/2019/03/26/why-is-my-web-component-inheriting-styles/
https://meowni.ca/posts/part-theme-explainer/
<slot>
是
```
reflected
```
，它们不是由shadowDOM 设计的，而是由它的容器设计的。 请参阅：::分档内容
https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet

Answer 3

<custom-element tabindex=10> <style> :host div { --color: red; } </style> </custom-element> class Element extends HTMLElement { constructor() { super(); var shadow = this.attachShadow({mode: 'open'}); var user_style = shadow.host.innerHTML.match(/<style>([\s\S]*?)<\/style>/); var style = document.createElement('style'); style.innerHTML = ` :host div { color: var(--color, #aaa); } ` + user_style ? user_style[1] : ''; shadow.appendChild(style); shadow.host.querySelector('style').remove(); } } customElements.define( "custom-element", Element )

Answer 4

注意：截至 2023 年，此答案可能已过时。请参阅其他答案以获取更新信息。

一些解决方案：

CSS 变量：

:host-context

：

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

另外，我还没有测试过，但有人建议

@import url('/common-style.css');

，在这里：
```
聚合物跨元素共享样式
```

Answer 5

点亮后，像这样

export class AppComponentBase extends LitElement { static styles = css` :host { font-family: sans-serif; font-size: 21px; } `; }

然后不要从

LitElement

继承，而是让应用程序中的所有组件都从

AppComponentBase

继承，如下所示：


export class HomeRouteComponent extends AppComponentBase {

    render() {
        return html`
<h1>Home</h1>
<p>
    Welcome to my website
</p>
`;
    }
}

您还可以添加或一些样式

export class HomeRouteComponent extends AppComponentBase { static styles = [super.styles, css` h1 { color: red; } `] render() { return html` <h1>Home</h1> <p> Welcome to my website </p> `; } }

拥有一个可以继承的通用组件可能还有其他优点。例如共享一些逻辑，尽管这可能更好地通过控制器来实现。

这一切都已点亮，但可以使用“裸”customElmements 相对轻松地实现相同的概念。

Answer 6

:host

而不是

:root

中定义变量，瞧！

:host {
   --someGlobalVariable: 10px
}

constructor() {
    super();
    this.root = this.attachShadow( { mode: 'open' } );
    const sheet = new CSSStyleSheet(),
    globalSheet = new CSSStyleSheet();
    sheet.replaceSync( css );
    globalSheet.replaceSync( globalCss );
    this.root.adoptedStyleSheets [ globalSheet, sheet ];
}

Answer 7

::shadow .redColor { background-color: red; }

这会将样式应用于具有 .redColor 类的阴影树内的所有元素。

这篇精彩文章中提供了更多信息 + 其他样式可能性：

Shadow DOM 201

如何在shadow dom中使用全局css样式

问题描述投票：0回答：7

7个回答

最新问题

如何在shadow dom中使用全局css样式

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7