Css 使用阴影dom将样式表应用于半个页面？

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

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

---

无论如何，我不想修改CSS以将其约束到特定元素，也不想使用iFrame。

是的，您可以使用

@import url

CSS规则在阴影DOM中应用外部样式表

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

---

如果您的内容已经存在于普通DOM中，您可以使用

appendChild（）

移动它，使用

cloneNode（）

复制它，如上例所示），或者在

元素的帮助下显示它：

div1.attachShadow（{mode:'open'}）
div1.shadowRoot.innerHTML=`
：host{显示：内联；背景：#cfc；}
：：开槽（span）{颜色：红色；}
`

你好，世界

如果不移动（如通过appendChild），就不能将现有内容放入阴影DOM中吗？在休息时移动元素会产生反应。这些插槽真的很奇怪，但我认为它们可能适合我正在尝试做的事情！不幸的是，我不能以这种方式导入外部样式表，但我想我可以将其复制到我的项目中；只会让维护变得更困难。谢谢你的帮助！

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