问题标签 [shady-dom]

Polymer 0.8 引入的 Shady DOM 是否可以防止样式泄漏到本地 DOM 中，还是只有 Shadow DOM 才能做到这一点？

https://www.polymer-project.org/0.8/docs/devguide/experimental.html#xscope-styling

在下面的示例中，Shady DOM 会阻止标题变红吗？

我的元素.html

样式.css

In x-num.html

In index.html

When I try to do document.querySelector("x-num").innerHTML = "4000", it still shows 3546, I would like to ask if there is anyway to make the result change when the content changes

我正在尝试使用 JavaScript 从 Polymer 组件外部访问本地 DOM 元素。在过去，我可以使用document.querySelector并使用选择器选择 shadowDOM 元素::shadow。

目前，我了解本地 DOM 是作为“阴暗 DOM”实现的。在这种情况下如何访问本地 DOM 元素？

我正在使用 Poylmer 1.0，但我仍然阅读https://www.polymer-project.org/0.5/articles/styling-elements.html#cat。有谁知道同样的逻辑是否适用于Shadydom？

我真的很喜欢https://events.google.com/io2015/制作视频的方式。它用于paper-dialog显示视频并占据整个视口。

我很难paper-dialog采取完整的视口。如图所示，我似乎无法强迫它。我已经尝试过top: 0px; bottom 0px; left: 0px, right: 0px，但这会破坏这种行为。fit给了我到目前为止你在图像中看到的最接近的外观。

问题，请：

1. 只是为了确认，所有的孩子paper-dialog都在 light dom，对吗？

2. 要paper-dialog像在 https://events.google.com/io2015/中那样填充视口​​，我需要使用/deep/或::shady执行此操作吗？似乎<paper-dialog class="fit">会这样做。

我用这个动态更新所有聚合物元素中的“--accent-color”：

在 Shadow DOM 下工作正常，但在 Shady DOM 中只是一些元素发生了变化。

有谁知道改变定义的自定义样式属性的方法

在这个自定义元素中，在width: 90%中使用时 将不适用:host，但width: 90%如果我将其应用于section. 为什么是这样？不是应该应用portfolio-display的阴暗 dom 元素，width: 90%因为它是托管元素而不是section？

下面是一个示例聚合物元素

以及使用自定义 CSS 设置样式的示例

我能够将自定义 css 属性与connectingclass 属性一起应用，但是当我使用 js 将自定义元素的类更改为 时disconnected，不会应用新的 css 属性。事实上，当 class 属性改回 时connecting，相应的 css 属性也不会应用。

我怀疑这是因为我的浏览器在 shady-dom 模式下运行，并且在多边形填充中存在间隙。

我很想直接将 css 属性应用到<p>shady-dom 中的元素上，但它想知道是否有适当的方法来处理这个问题。

下面通过我准备并推送到github repo的一个简单示例来说明这个问题。

我创建了一个自定义元素“x-menu”（在 /x-menu.html 中），其中包含 light DOM 的样式规则。在实践中，我这样做的用例是使用 CSS 变量和 mixin 来定义要在文档和自定义元素中使用的颜色、字体堆栈等。

我有一个自定义元素定义文档样式（在 /demo/index.html 中），如 Polymer 1.0 开发指南的相关部分所述，它为我的页面定义了一些排版规则。

这适用于 Chrome 中的本机 Shadow DOM。

但是，当使用 Shady DOM 时，文档样式会解析为比 x-menu 元素中的样式具有更高特异性的样式定义。现在它出现在 Chrome 开发者工具的 Styles 堆栈中：

我知道 Shady DOM 和 Shadow DOM polyfill 存在一些限制（webcomponents.org 简单地说一个已知限制是“CSS 封装是有限的。”），

我能想到两种解决方法，但都不是很实用：

1. 为每个轻量级 DOM 节点添加一个 CSS 类（您可以在演示页面中看到）
   • 这是不切实际的，因为自定义元素的用户必须记住这一点并且破坏了 CSS 封装的目标。
2. 将 CSS mixin 应用于本地样式定义。当被 Shady DOM 处理时，CSS 在文档级别比“自定义样式”具有更高的特异性。
   • 这变得更加麻烦，并在开发、维护和处理 CSS 时增加了不必要的开销。

我正在寻找适合此问题的解决方法的任何想法。最坏的情况，我想把责任放在元素开发者身上，而不是元素的用户身上。

我一直在追逐这个错误。在开发中，一切都运行良好，当推送到 Heroku 进行生产时，情况却并非如此。我在后端使用sails，但这不是问题，因为这是客户端问题。最糟糕的是，这一直在工作，几天前才坏掉。追溯我的脚步并不能证明找到原因。

长故事短图片可能会有所帮助，以防有人以前看过。

在生产中加载应用程序时，这些错误开始出现“

这很令人困惑，因为我没有在本地进行开发。过去在使用 js concat 和 minification 遇到问题后，我将其关闭以进行生产。还是一样的错误。然后我注意到生产和开发负责人之间的这种差异：

生产：

发展

接下来，我检查了我在加载时添加的聚合物组件的链接，并为初始页面动态添加。生产和开发都是相同的：

接下来我尝试使用Polymer.Base.importHref('/vendor/paper-checkbox/paper-checkbox.html'). 导入后添加到头部的 shady DOM 样式对于生产和开发是不同的

生产：

发展：

最后，当我创建了一个纸张复选框元素时，它document.createElement('paper-checkbox')在本地开发中运行良好。在生产中，错误如前：

我被困在这里。如果有人以前见过这个并且有洞察力，我很感激。

I'm having issues using shadow DOM for one of the web-components (paper-stepper) and it requires the use of the shady DOM instead. I'm not sure what the differences are and why that is the case.