将样式表应用到带有 shadow-dom 的半页？答案

【问题标题】：Apply stylesheet to half a page with shadow-dom?将样式表应用到带有 shadow-dom 的半页？
【发布时间】：2017-01-19 18:26:29
【问题描述】：

我可以使用 shadow-dom 或通过任何其他方式将外部样式表应用于特定的 div/元素吗？我听说过 shadow-dom，我相信它可以让你限制你的风格，但我知道的就这些了。

具体来说，我希望页面的一半使用引导程序，另一半使用 MUI 或其他东西。这只是为了展示我的库如何与不同的主题完美配合。

我不想以任何方式修改 CSS 以将其限制为特定元素，也不想使用 iframe。

【问题讨论】：

标签： css shadow-dom

【解决方案1】：

是的，您可以使用 @import url CSS 规则在 Shadow DOM 中应用外部样式表。

div.attachShadow( { mode: 'open' } )
   .innerHTML = `
       <style>
           @import url( './external-style.css' )
       </style>
       <!-- other elements -->`

注意：@import 规则必须放在 <style> 元素的顶部。

然后您可以像操作普通 DOM 一样操作 Shadow DOM：

div.shadowRoot.appendChild( firstSection.cloneNode( true ) )

如果您的内容已经存在于普通 DOM 中，您可以使用appendChild() 移动它，使用cloneNode() 复制它，如上例所示），或者在显示它的帮助下<slot>元素：

div1.attachShadow( { mode: 'open' } )
div1.shadowRoot.innerHTML = `
  <style>
    :host { display: inline ; background: #cfc ; }
    ::slotted( span ) { color: red ; }
  </style>
  <slot></slot>`

<div id=div1>
    <span>Hello</span> world
</div>

在最后一种情况下，您需要使用 ::slotted 伪元素来更改原始 DOM 的样式，因此您可能需要修改已经存在的样式表。最佳解决方案取决于您的用例。

【讨论】：

你不能不移动就将现有内容放入 shadow DOM 中（例如通过 appendChild）吗？移动元素会破坏 React。
那些插槽真的很奇怪，但我认为它们可能适用于我正在尝试做的事情！不幸的是，我不能以这种方式@import 外部样式表，但我想我可以将它复制到我的项目中；只会使它更难维护。感谢您的帮助！