Shadow DOM全局css继承可能吗？

Question

Shadow DOM全局css继承可能吗？

有没有办法继承:主机元素css样式到shadow DOM？原因是如果我们开始开发Web组件,每个Web组件样式必须在页面上保持一致.

该页面可以具有全局css,并且此全局css样式可以继承到shadow DOM.有::shadow和/deep/,但现在已经过时了.

或者,这是否违背模式？如果是这样,为什么？

我发现了这个Q/A,但对我来说似乎已经过时了. Shadow DOM元素可以继承CSS吗？

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>
`;

Run Code Online (Sandbox Code Playgroud)

  .red {
    padding: 10px;
    background: red;
    font-size: 25px;
    text-transform: uppercase;
    color: white;
  }

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sup*_*arp 1

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

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

归档时间：	8 年，1 月前
查看次数：	871 次
最近记录：	8 年，1 月前

Shadow DOM全局​​css继承可能吗？

Shadow DOM全局css继承可能吗？