问题标签 [shadow-dom]

我有一个 RPG Main HTML Element 定义如下。我在我的 index.html 文件的主体中实例化它。

正如人们所期望的那样，我还定义了网格布局和网格平铺元素。在网格布局的构造函数中，我试图引用它的子元素。但是该元素在上面的 rpg-main 类中实例化时认为它有 0 个子级。

***以上代码打印“NUM CHILDREN: 0”

它只是在我的 rpg-main 元素中实例化，所以我很惊讶它不会将网格图块识别为子元素。可能是因为 grid-layout 元素是在 rpg-main 自定义元素的模板标签中实例化的吗？（所以也许 grid-layout 不认为它的孩子在'light dom'中？）这将是一种耻辱，但如果是这样，解决方法是什么？

我刚刚创建了我的第一个元素作为测试，我遇到了点击事件的问题。我的元素只是一个带有单击事件的按钮，用于增加一个计数器，该计数器显示为按钮文本的一部分。我还添加了一个内容标签，以便您可以向按钮添加其他文本。

当我点击 Chrome 中的按钮时，如果我点击内容文本，则不会触发 click 事件。我必须实际单击按钮元素/按钮中的计数才能触发事件。尽管在 Firefox、Safari 和 Opera 中，一切似乎都正常工作。我可以在这些浏览器中单击按钮上的任何位置，然后单击事件将触发。难道我做错了什么？这只是 Chrome 的一个错误吗？这是我的代码：

索引.html

元素/my-counter.html

如果您想下载并自行测试，此代码也在 GitHub 上：https ://github.com/andersryanc/playing-with-polymer/tree/master/my-counter

我有两个元素：一个是<drop-down>元素，另一个是<populated-drop-down>元素。populated-drop-down extends drop-down, 但是，正如您可能已经猜到的那样，尝试使用一些选项预先填充它。假设我可以简单地将 HTML 放入<shadow></shadow>标签中，但这不起作用：

（代码也可以在 JSBin 上找到。）

似乎我可以将其他标签包裹起来，<shadow></shadow>但不能在其中放置任何标签<shadow></shadow>

我想找到给定元素的 DOM 范围。换句话说，包含它的文档或文档片段。

有什么比下面的代码更好/更快的吗？

http://jsbin.com/rudik/4/edit

我想在 Chrome 中设置视频控件的滑块拇指样式。
css 路径

不起作用。

游乐场：http: //jsfiddle.net/holden321/27fUR/

我正在尝试在新元素（选项卡列表）中使用纸张选项卡，但在打印选项卡之后，我无法使用 querySelector 更改选定的选项卡。

元素代码（无样式）：

Index.html 代码（无样式）：

但

我试图将index.htmleventListener放入，但我遇到了同样的问题。谁能告诉我问题出在哪里？

非常感谢你！

我正在构建一个模块化 Web 应用程序，其中要处理各种用户创建的模型。Shadow DOM 是一个显而易见的选择，但我不明白如何在 shadow DOM 中执行 JS。

我有一个 HTML 内容要加载以下虚拟脚本。

我使用以前的脚本加载页面，如下所示：

正如评论所说，将内容插入到影子 DOM 根目录时不会执行 JS。标头出现在这两种情况下，但脚本仅在轻 DOM 中执行。这是为什么？如何在 shadow DOM 中执行自定义 JS？（没有跨域的东西。）

我有一个users像这样的数组：

我在我的模板中访问，如下所示：

我无法迭代prefs. 我已经尝试了上述配置，嵌套模板标签，使用类似数组的表示法（user.prefs[0]，user.prefs.slice(0)），都无济于事。

谁能指出我正确的方向？我想要做的是最终能够列出数组的键/值对prefs（因为它的名称/大小会不断变化）。

谢谢你。

编辑：感谢你们建议的过滤器，我找到了解决方案：

使用的过滤器是斯科特答案中的过滤器。

我目前正在使用聚合物的 core-scaffold & co。创建带有内容区域的标题/侧边栏。我目前遇到的问题是我无法访问内容元素的某些属性，例如 scrollTop。（因为我需要访问的实际 scrollTop 属性是在 shadow DOM 中定义的。）

这与我正在使用的延迟加载 jquery 插件冲突。该插件正在检查 window.scrollTop 但更改插件以检查我的内容（滚动而不是窗口）的 scrollTop 不会有任何影响，因为 scrollTop 在影子 DOM 中是“隐藏的”。

有没有办法访问影子 DOM 元素？我唯一能找到的是访问您使用 createShadowroot （或其他任何名称）创建的影子 DOM 对象，但我似乎找不到任何关于如何访问已经存在/创建的影子根的参考。

下面的示例代码

我有一个结构：

我如何div从span?

span.parentNode是#shadow-root,.parentNode从那是null