标签: shadow-dom

我希望在页面上的多个位置呈现"相同"的HTML元素.此元素是脚本/动画的,各种渲染需要保持同步.

我考虑过的解决方案包括:

1. 将元素的副本放在多个位置并更新所有元素.这就是我想要避免的.
2. 将元素的副本放在多个位置.更新其中一个副本,并使用突变事件捕获这些更改并将其重放到其他副本.好像很多工作.
3. 使用shadow DOM.我对这个替代方案寄予厚望,最初似乎是可能的,使用"插入点",允许这里的DOM子树虚拟放置在那里的DOM子树中.

我还没有测试过Chrome 25中提供的最后一种替代方案.在W3C规范说:

值得特别考虑的一种情况是插入点是另一个影子主机的子节点时的情况......将节点分配到多个插入点的效果称为重新投影.

但是之后...

尽管在重投影期间分布到多个插入点,但由于重复投影的限制,节点仍然只渲染一次:因为插入点只是在影子主机的子节点时才会重新投影,它们是从未渲染过.而是将阴影树呈现在它们的位置.

是否有可能影子DOM可能做我想要的并且值得测试,或者是否有其他推荐的方法？

我有一个自定义元素,它本身托管一个自定义元素.

<polymer-element name="flex-nonvisual">
  <template>
    <polymer-flex-layout></polymer-flex-layout>
  </template>
</polymer-element>

现在进入attached()(或其他一些回调)PolymerFlexLayout我想设置flex-nonvisual元素的class属性.

在Javascript代码看起来像 this.parentNode.host.classList.add('someclass');

在Dart in attached()(调用之后super.attached())this.parent为null并且我找不到对host元素的任何其他引用.

我怎么能在Dart中做到这一点？

查看有关ShadowDOM的文章,似乎是对DocumentFragments的增强.ShadowDOM的真正好处是什么？CSS特异性？我不能用Fragments做大致相同的事情吗？

我正在寻找各自的功能列表.例如,两者似乎都允许您在内存中组装d​​om树并离开主渲染路径.但是,ShadowDOM似乎具有作用域CSS的额外好处.

在什么情况下你会使用ShadowDOM vs你想要使用DocumentFragments的地方？

UPDATE

在仔细研究了这个之后,我看到这两种技术是完全正交的.

注意:由于问题已经结束,我自己无法回答.我最初把我的发现的细节放在下面的评论中,但想到更多的人会在这里查看文本.

Document Fragments是一个Javascript/DOM构造工具,用于创建DOM之外的非heirrchical节点集合(每个节点可以是其他节点的父节点).它们本质上是节点集合的包装器,一旦片段附加到DOM就会被放弃.DocumentFragments允许您在同一级别收集多个节点,并将它们作为兄弟节点附加到另一个DOM节点.

Shadow Dom就是在更大的渲染DOM中隔离副作用.ShadowDom允许您使用封装样式创建沙盒可重用组件.当基于ShadowDom的组件添加到更大的Web应用程序时,其CSS样式不会泄漏到应用程序的其余部分,应用程序自己的样式也不会影响组件的呈现.

请注意CSS组合器,例如/deep/,::shadow存在用于从父dom样式化(和选择)shadowDom组件,但这些组件在不久的将来被弃用.因此,建议使用ShadowDOM的可重用组件依赖CSS变量进行样式设置,如果它们打算由使用它们的应用程序进行自定义.

目前,我的组织在聚合物1上使用Selenium,Protractor和Mocha,我们使用阴暗的dom.对于验收测试,我们使用/deep/组合器来刺穿DOM.对于聚合物2,/deep/组合剂不推荐使用.

我的问题:在编写验收测试时,DOM如果/deep/不推荐使用组合器,我该如何穿透阴影？

这个问题适用于 Ionic，但它的答案可以更普遍地适用于 CSS。我不知道。

我使用 ionic 4 创建具有特定样式的影子 DOM 元素。我有以下内容：

<ion-item>
  <ion-label position="floating">Floating Label</ion-label>
  <ion-input></ion-input>
</ion-item>

我希望“浮动标签”文本在浮动时比平时更向左移动。我可以使用标签本身的样式轻松地做到这一点。

然而，在其下创建的 Shadow DOM divion-item有自己的样式，其中包括overflow: hidden. 我还没有找到从样式表更新这些样式的方法。我尝试过使用/deep/和各种其他选择器，但这些似乎不起作用，并且对它们的支持似乎也被删除了。我知道您可以使用 CSS 变量，但这个特定属性overflow不是由变量设置的。我还知道您可以使用 DOM 将样式注入到影子 DOM 中，但我想避免这样做，因为我必须在每个组件中的某个地方执行此操作，而不是能够在整个应用程序中执行一次。

如果变量不可用，是否有任何方法可以使用 CSS 覆盖影子 DOM 中设置的样式？

这个问题与StackOverflow上的其他问题类似,但我找不到任何适用于我的情况和非弃用方法的答案(我开始认为这种情况可能没有任何好的解决方案).

假设我们有一些main.css文件,其中包含按钮,列表,链接等的常用样式.所以它只是一些标准的.css文件,其中包含我们希望在整个应用程序中重用的常见样式.我们希望使用Shadow DOM将相同的样式应用于Web组件.

我知道有几种方法可以实现这一目标:

1. 使用一种不推荐的方法::: shadow,>>>,/ deep/selectors.但是那些选择器现在已经被弃用了,所以我想这不是一个好的方法来推进.
2. 使用css变量.如果我们需要设置一些属性,这种方法适用于自定义目的.但是如果我们想从main.css文件迁移10-20个常用样式,那就太复杂了.
3. 在Shadow DOM中使用@import语句或"link"标签.它会起作用,但会复制每个组件的所有样式.如果我们有10个Web组件,我们最终会得到10个完全相同样式的重复项.它听起来也不是一个好的解决方案.特别是如果我们有很多共同的风格,从性能的角度来看,它听起来可能是糟糕的解决方案.
4. 不要使用Shadow DOM并使用全局样式:)但它不是当前问题的解决方案.

我还检查了Angular Framework中如何解决相同的问题(我检查了Angular的第5版).当我将封装行为设置为Native时,它实际上只是复制样式(如上面描述的#3),我认为这不是最好的方式(但可能是目前最好的方式).

那么,有没有人知道是否有任何其他方法来解决这个问题没有上述缺点？听起来像Shadow DOM的当前缺点带来了比它试图解决的更多问题.

我有两个网络组件，一个类似于列表项，另一个是容器。在列表项中有一个按钮，它调度 onclick 事件。两个组件都使用独立的 Shadow-dom。

<custom-list>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
        <custom-list-item></custom-list-item>
</custom-list>

如何在“自定义列表”中侦听“自定义列表项”中的按钮发出的事件？

我们使用 Angular 8 的自定义元素创建了一个 Web 组件。该组件的一部分是显示一些自定义图标（作为不同的应用程序开发和打包）。正如您在上一个问题中所看到的，我们已经成功地将所有 css 捆绑在一个文件中，并使用但不使用 Shadow DOM 在独立应用程序中显示它们:host ::ng-deep。

在我的 Web 组件中切换到 Shadow DOM ( encapsulation: ViewEncapsulation.ShadowDom) 并删除即将弃用的字体后::ng-deep，应用程序中的字体似乎已损坏。

我在这里和这里找到的唯一解决方案表明字体声明必须发生在shadowDOM之外，例如包含自定义组件js文件（作为独立应用程序）的html文件内。就我而言，字体被打包为不同的应用程序，并且自定义 Web 组件将在许多采用不同技术的项目中使用，而这些项目可能无法包含它。

自定义图标（@font-face）是否有另一种方法可以在影子 DOM 中工作？

我正在使用 Vue 和 Bootstrap 作为应用程序，根据官方 Vue 文档（https://cli.vuejs.org/guide/build-targets.html#web-component）生成 Web 组件。大多数情况下，Bootstrap 和我的业务逻辑在#shadow-rootWeb 组件中运行良好，就像在轻量级 DOM 中一样。

然而，Bootstrap 工具提示（基于 Popper.js https://popper.js.org/）在 Shadow DOM 中根本不起作用。我还尝试在 Shadow DOM 封装代码中直接使用 Popper.js 和 Tippy.js ( https://atomiks.github.io/tippyjs/ ) 调用工具提示，完全避开 Bootstrap，但我仍然无法让它们工作。

请参阅此处的示例： https: //jsfiddle.net/mfep6rg9/

我可以猜测为什么——第 3 方工具提示库很可能找不到目标 DOM 元素，因为它位于 Shadow DOM 中。

是否有第三方解决方案可以解决 Shadow DOM / Web 组件封装问题？

在使用 Playwright（或 Puppeteer）编写 E2E 测试时，我使用 Chrome 开发工具来检查我的 css 选择器。

为了验证选择器是否有效并且可以找到，我在 DevTools 的 Elements-Tab 中使用 cmd+f 搜索栏，如下所示：

但是如何在 Shadow-root 中找到选择器呢？

只是为了明确：这个选择器可以通过代码找到。我只是在 DevTools 中找不到它