Question

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

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

Answer 1

一些解决方案：

CSS变量：
:host-context： http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
另外，我还没有测试过，但有人建议@import url('/common-style.css');，在这里：Polymer share styles across elements

请注意，Amid也指出了上面列出的其中一篇文章。在撰写文章时，Chrome没有CSS变量。但现在它已经在最近推出的谷歌Chrome 49中使用。

Answer 2

我刚刚遇到了与原始问题相同的问题，即：为<h3>元素定义一次全局规则，并从任何/许多{ {1}}个。

否，ShadowDOM 不非常适合此问题，因为即使我曾经定义{，css-variables和font变量， {1}}，我仍然需要遍历每个阴影样式表，并添加一个使用它们的CSS规则。

在撰写本文时（是的，我们现在是2019年）最短的标准化解决方案确实是导入一些全球通用的CSS。在Chrome，Firefox和Anaheim（Chromium上的Edge）上完美运行。

仍然需要在每个组件中添加一个color规则，因此仍然很昂贵（从编码/维护POV，样式表仅获取一次），但这是我们现在可以支付的最低价格。

Answer 3

在Chrome 66（截至2018年）中，所提供的链接不适用于我，因此我最终使用此方法从外部自定义自定义元素：

<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

你可以通过:: shadow伪元素来实现。像这样：

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

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

更多信息+这篇精彩文章中的其他造型可能性：Shadow DOM 201

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

4 个答案: