logo标签列表

Shadow DOM 全局 CSS 继承是否可行？

htmlshadow-dom
7
有没有一种方法可以将:host元素的CSS样式继承到影子DOM中？ 原因是如果我们开始开发Web组件，每个Web组件的样式必须在页面上保持一致。
页面可以有全局CSS，这些全局CSS样式可以继承到影子DOM。以前有::shadow和/deep/，但现在已经弃用了。
或者，这是否违反了模式？如果是这样，为什么？
我找到了这个Q/A，但对我来说似乎已经过时了。 Can Shadow DOM elements inherit CSS? http://plnkr.co/edit/qNSlM0?p=preview 

const el = document.querySelector('my-element');
el.attachShadow({mode: 'open'}).innerHTML = `
  <!-- SEE THIS 'red' is not red -->
  <p class="red">This is defined in Shadow DOM. I want this red with class="red"</p>
  <slot></slot>
`;
  .red {
    padding: 10px;
    background: red;
    font-size: 25px;
    text-transform: uppercase;
    color: white;
  }
<!DOCTYPE html>
<html>

<head>
  <!-- web components polyfills -->
  <script src="//unpkg.com/@webcomponents/custom-elements"></script>
  <script src="//unpkg.com/@webcomponents/webcomponentsjs"></script>
  <script src="//unpkg.com/@webcomponents/shadydom"></script>
  <script src="//unpkg.com/@webcomponents/shadycss@1.0.6/apply-shim.min.js"></script>
</head>

<body>

<div>
  <p class="red">I'm outside the element (big/white)</p>
  <my-element>
    <p class="red">Light DOM content is also affected.</p>
  </my-element>
  <p class="red">I'm outside the element (big/white)</p>
</div>

</body>

</html>

你考虑过使用CSS变量和mixin吗？如果你将它们暴露出来，就可以允许你覆盖或配置组件。 - Jose A
2个回答
2

正如supersharp指出的那样，这很简单，但从你可以在互联网上找到的示例中并不明显。以这个基类为例。或者，您可以制作两个不同的类（例如Component和ShadowComponent）。还有使用adoptedStyleSheets或::part选择器的选项。

class HtmlComponent extends HTMLElement {
    static ModeShadowRoot = 0;
    static ModeRoot = 1;
    static styleSheets = [];
    static mode = HtmlComponent.ModeShadowRoot;

    #root = null;

    constructor() {
        super();
        if (this.constructor.mode === HtmlComponent.ModeShadowRoot) {
            const shadowRoot = this.attachShadow({ mode: 'closed' });
            shadowRoot.adoptedStyleSheets = this.constructor.styleSheets;
            this.#root = shadowRoot;
        } else {
            this.#root = this;
        }
    }

    get root() {
        return this.#root;
    }

    init() {
        this.root.innerHTML = this.render();
    }

    render() {
        return '';
    }
}


class Test extends HtmlComponent {
    static mode = HtmlComponent.ModeRoot;

    constructor() {
        super();
        super.init();
    }

    render() {
        return `
            <div>
                <x-nested-component></x-nested-component>
            </div>
        `;
    }
}
1

Shadow DOM 的一个特性是隔离 CSS 样式。

因此，如果您希望您的自定义元素从主页面继承样式，请不要使用 Shadow DOM。这并非强制性要求。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接