Question

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

具体来说，我希望一半页面使用bootstrap，另一半使用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 -->`

NB ：@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将样式表应用到半页？

1 个答案: