ShadowDOM的坑

发表于 分类于 ， 阅读次数： 阅读次数： Valine： 本文字数： 585
ShadowDOM 虽然可以将内外部 CSS 与 JS 隔离开, 但是也存在一些由此产生的小坑

  • CSS 隔离问题

    • 可继承 ShadowDOM提供了样式隔离, 但是 ShadowDOM 还是会继承外部 Document Body 定义的可继承 style, 可以使用 all: initial 隔离
    • 组件库 组件库的样式可能由于 CSS 隔离无法被应用
    • Tailwind 等基于 rem 的 CSS 解决方案 由于 rem 是可继承的, 因此, Tailwind 中的相对值都会应用最外部的 rem

  • open & close

    • 如果将模式设置为 open, 那么主文档可以通过访问组件的 .shadowRoot 属性来访问组件内部的 ShadowDOM, 这意味着开发者可以在主文档中修改组件内部的代码.
    • 如果将模式设置为 close, 那么主文档将无法通过 .shadowRoot 属性访问组件内部的 ShadowDOM.

    因此, 当我们在 closed 模式的 ShadowDOM 中使用了某些组件库, 这些组件库如果没有在 ShadowDOM 内部的监听, 那么这些监听大概率会失效

  • 事件冒泡被重定向

    为了保护内部 Element 不被外部获取, 当事件触发冒泡时, 外部 EventHandler 无法获取到内部 target, 例如下面例子中两个按钮分别在 closed 与 open ShadowDOM, 但是外部的 onClick 获取到的 target 都是被重定向后的 Container

  • CSP 问题

    ShadowDOM 内部的元素依然遵守外部 document 定义的 CSP 规则, 无法通过 meta 修改 CSP