使用阴影将样式表应用于半页

Question

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

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

无论如何，我都不想修改CSS以将其限制为特定元素，也不想使用iframe。

Answer 1

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

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 的样式，因此您可能必须修改已经存在的样式表。最佳解决方案取决于您的用例。