我正在关注html5rocks shadow DOM tutorials，我想，“如果我可以使用脚本为属于某个类的每个元素添加一个 shadow dom 会怎样。” 但它一直没有奏效。我有以下html：

然后这个javascript：

此代码仅显示名称为 Jim 的模板。在查看 chrome 开发工具时，我看到 有一个影子根<div class="nameTag">Bob</div>，但由于某种原因它是空的。无论我有多少 .nameTag 元素，这种模式都会继续，只有最后一个标签的影子根有任何内容。我的脚本有问题吗？

我想做一个上下文菜单元素，它会自动contextmenu向它的父元素添加一个侦听器（因此可以在右键单击父元素时展开它）。我设法通过查找this.parentNode元素何时位于常规 DOM 层次结构中来做到这一点。但是，当在 shadow DOM 中时，this.parentNode指向#document-fragment并且似乎没有办法穿透该障碍。我在这里缺少什么吗？

以下问题询问“如何在 Angular 组件测试中查询 shadowDOM ”，但我不想在单元测试上下文中实现这一点，而是在实际组件中实现。

具体来说，我有一个组件，其模板包含一个我想要引用的画布。

假设我有两个不同的polymer-elements

一个应该使用content占位符嵌入到另一个内部。是否可以在这两个嵌套之间进行数据绑定polymer-elements？

我试过了，但我无法让它工作：http: //jsbin.com/IVodePuS/11/

根据http://www.polymer-project.org/articles/communication.html#binding data-binding betweenpolymer-elements应该可以工作（在那些例子中，它们是在template标签内完成的，没有使用content占位符）。

更新：

Scott Miles 澄清说，数据绑定仅适用于该template级别。
但是在我的情况下，我事先不知道确切的template内容，但我想允许我的用户parent-element指定child-element它应该包含的内容（前提是有不同的child-elements.
我认为这个问题与这个问题有关：Using template defined in light dom在 Polymer 元素内

我更新了下面的示例以突出显示他的：

用户可以选择child-element要嵌入的内容：

解决方法：

我发现的唯一解决方法是添加change watcher并使用getDistributedNodes()来获取子元素并手动设置data2为data：

聚合物中是否有类似 angularjs 指令的 transclude 属性的东西？是什么让我可以在模板中的特定位置包含一些元素？

我想实现以下目标：

可以表达为：

我不确定这是否是聚合物的任务，或者这是否是使用聚合物的典型方式。我在问，因为我开始喜欢聚合物，我想保持惯用思维。

我有一些使用Polymer创建的自定义元素。我们称它为 x-input，它看起来像这样：

我有这个 html 我使用 Angular：

这是JS：

问题在于双向数据绑定。当我更改#outer_input输入值时，x-input 内部值（名称和年龄）会更改。

但是当我更改自定义元素输入时，只会更改内部绑定变量。

如何更改聚合物元素中绑定变量的值，它将更改模型和所有外部绑定 UI 和数据（双向绑定）？

谢谢

我正在尝试在我的聚合物元素中创建一个方法/函数，它允许我将属性更改为所有实例，除了单击/点击的实例。

更具体地说，当我单击元素的一个实例时，我想更改它的所有其他实例的 CSS 属性。

图片示例

谢谢！

我想使用当前的 Web 组件规范实现一个列表框小部件。此外，生成的列表框应符合 ARIA 标准。实例化列表框小部件应该很简单：

出于清洁和封装的目的，其他一切都应该在 shadow dom 中渲染。为了实现这个小部件，注册了两个自定义<x-listbox>元素<x-option>。shadow dom 的顶级元素<x-listbox>是 a <div>，它带有role=listbox和aria-activedescendent可访问性的属性（我不希望<x-listbox>元素上有这些属性，因为它们是实现细节。）

为了aria-activedescendent工作，需要选项元素上的 id。将 id 直接放在<x-option>元素上不会起作用，原因有两个：首先，它会污染使用列表框小部件的文档的 id 命名空间。其次，更重要的是，id 不能跨影子边界工作（这是影子 dom 的目的之一），因此选项的 id 必须<div>与aria-activedescendent属性位于相同的影子 dom 中。

一个解决方案是用另一个（属于那个shadow dom）包围<x-option>作为内容呈现在shadow dom中的每个，在其上可以放置一个id。<x-listbox><div>

我的问题是：这是正确的方法吗？如何使用自定义元素和 shadow dom web api 来实现它？

正如标题中提到的，我不能使:not选择器与select插入点的属性一起使用。

如此处所示http://jsbin.com/lusof/1/edit：

• 该语法适用于 querySelector
• 如果使用not选择器未选择，则可以访问类似的节点

我错过了什么明显的东西吗？

感谢您的回答

到目前为止，我已经编写了一些 Polymer 组件，对于更复杂的东西，我喜欢它们的样式与页面其余部分隔离的方式。在多个应用程序中使用它们要容易得多。

然而，今天我正在创建一个超级简单的组件，我意识到我真的很想融入页面的样式。我有一个组件，它封装了一堆逻辑，但只呈现一个基本的<a href>关联。是否可以通过 CSS 或其他方式让该链接从页面的其余部分继承其样式？