【问题标题】: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 规则必须放在 &lt;style&gt; 元素的顶部。

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

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

    如果您的内容已经存在于普通 DOM 中,您可以使用appendChild() 移动它,使用cloneNode() 复制它,如上例所示),或者在显示它的帮助下&lt;slot&gt;元素:

    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 外部样式表,但我想我可以将它复制到我的项目中;只会使它更难维护。感谢您的帮助!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-09-17
    • 1970-01-01
    • 2019-04-14
    • 2021-09-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多