问题标签 [shadow-dom]

我正在尝试创建一个表格，使每个单元格都有一个与其坐标对应的唯一 ID。这在 Polymer 中没有问题；我刚刚完成

<table id="table"> <template repeat="{{ file in files }}"> <tr> <template repeat="{{ rank in ranks }}"> <td id="{{file}}{{rank}}">{{ space }}</td> </template> </tr> </template> </table>

其中ranks和是传递给 Polymer() 函数的对象files上space的键（分别为数组和字符串）。这一切都按预期工作。

现在的问题是通过模板生成的 ID 选择表格单元格之一。正在做

var place = file + rank; this.$.place.innerHTML = 'foo'

不起作用，因为它会引发“无法设置未定义的 innerHTML 属性”错误。我一辈子都想不出一种方法来告诉 Polymer 的自定义节点查找语法如何查找模板中未明确定义的 ID（例如“#table”）。

我已经使用 Bootstrap 3.1.1 和 Polymer 0.2.4 很长时间了，突然间 - 这可能是自上次 Chrome 自动更新（版本 35.0.1916.114）以来 - Bootstrap 停止设置 Shadow DOM 元素的样式。在使用 Chrome DevTools 检查（Shadow）DOM 时，我已经能够检查这些节点中的 CSS 类是否不出现。在其他浏览器中，例如 Firefox，它仍然可以工作。

我不知道这是我遗漏的东西还是某种错误，但是这种奇怪的样式行为也可以直接在 jsbin 上看到。我包括从实际组件中提取的两个改编代码块来说明我的问题：

• http://jsbin.com/yugih/1/（工作示例）
• http://jsbin.com/maleg/1/（非工作示例）

请注意，我想在前面的示例中强调的只是 CSS 样式应用（或不应用）方式之间的差异。

提前致谢，

纳乔

PS 我还用 Polymer 0.3.1 进行了检查，结果相同。

我有这个简单的聚合物自定义元素：

问题是悬停（和用于测试的动作）不起作用），为什么？

是否可以确保某些自定义元素仅在特定自定义元素中可用？

例如，我创建了一个site-heading和一个help-icon元素。

现在这不是最实际的示例，但是，假设 thehelp-icon是一个高度专业化的元素，仅在上下文中对site-heading. 如何强制元素仅在内部使用site-heading？

耶！

不！

更新 2：@ebdel

似乎这种关系并没有得到真正的支持，甚至可能不在规范中。这是一个真实世界的案例，我认为考虑到范围（隔离？）元素应该很重。

让我们假设供应商将创建一个可交付的 Web 组件。例如，SoundCloud 将创建一个<soundcloud-player>元素。玩家需要一个曲目列表，因此他们创建了一个<track-info attributes="track-id crop etc">{{HTML for description pane}}</track-info>元素。

该<track-info>元素仅作为 的子元素有用<soundcloud-player>：

• 目前，理论上<track-info>完全没问题，直到新的 Web 组件定义了一个<track-info>元素。

• 供应商可能创建的每个元素都以他们的名字为前缀真的有意义吗？IE。<soundcloud-track-info>

我们是否应该将此对话转移到其他地方，因为我们似乎已经有了原始问题的答案？

我正在玩 Google 的 Polymer-Project Web-Components Library。我想构建一个包含画布元素的自定义标签，并通过 javascript 从自定义元素中访问它。但我无法使用 document.querySelector 或 document.getElementById 访问它 - 任何类似问题的提示或经验都值得赞赏。

这是我的来源：

console.log 输出总是返回一个 NULL / 空集合，不管我在生命周期的哪个部分尝试调用画布。我的错误在哪里，我做错了什么？

最好的问候，卢波

例如，当用户单击视频标签的控件时。
我已经搜索了互联网，并没有找到任何东西。

I'm trying to understand what events that originate in light DOM look like when received in shadow DOM via a <content> element. I'm reading the Shadow DOM W3C Draft, and I don't entirely understand it but it sounds like events are to be "retargeted" from the point of view of the EventListener attachment.

In the cases where event path is across multiple node trees, the event's information about the target of the event is adjusted in order to maintain encapsulation. Event retargeting is a process of computing relative targets for each ancestor of the node at which the event is dispatched. A relative target is a node that most accurately represents the target of a dispatched event at a given ancestor while maintaining the encapsulation.

and

At the time of event dispatch:

• The Event target and currentTarget attributes must return the relative target for the node on which event listeners are invoked

So here's a simple Polymer custom element that just puts its children into a container, and adds a click EventListener to the container (in the shadow DOM). In this case the child is a button.

When I run this on Chrome 38.0.2075.0 canary, when I click on the button I get:

and when I click on the container I get:

So I get an event target in either the light or shadow DOM, depending on which DOM the source element was in. I was expecting to get a target from the shadow DOM in both cases because that's where the EventListener is attached. My questions are:

1. Is this the way it is supposed to work, and
2. If so, is there an alternative way to get events that bubble up from the light DOM retargeted to the shadow DOM?

In case someone wants to ask, "What are you trying to do?", I'm not trying to do anything specifically other than understand the behavior.

我正在使用 Polymer 的 ShadowDOM 和 polyfill MutationObserver，需要：

• 检测何时HTMLCanvasElement插入 a 以便我可以执行布局（其宽度和高度未通过offsetWidth/offsetHeight与 DOM 树分离时确定）
• 检测元素何时被移除，以便我可以停止它的requestAnimationFrame循环

传统上，如果没有 Shadow DOM，它的工作方式如下：

1. 附加MutationObserver到任何画布元素document.body并对其执行querySelectorAll
2. 执行一些方法，例如layoutNode在这些元素上
3. 如果在动画循环中document.body.contains(node)返回false，则该节点已从 DOM 中移除

使用 Shadow DOM 时，我可以绕过 shadow dom 边界，方法是对 DOM 中已添加根的所有元素执行（似乎非常低效）扫描，并layoutNode在任何继承自HTMLCanvasElement.

如何从画布的动画循环中检查该节点是否仍在 DOM 树中？

是否有更好的 API 用于检测何时插入 DOM 节点？

（注意，使用 Polymer 的 CustomElements polyfill 无法使用 MutationEvents。）

我是使用 Polymer 的新手，我正在尝试通过 jQuery 访问新自定义元素的 DOM，但没有成功。

我试图通过 domReady 方法访问元素，当元素初始子集保证存在时。

很感谢任何形式的帮助！

自定义元素：

HTML：

看来聚合物的

不适用于 VanillaJS<template>和自定义元素（在 IE 中）。

因为<polymer-element>它工作正常：http ://codepen.io/robdodson/pen/FokEw/ ，但由于某种原因，当我尝试对原生 JS 做同样的事情时，它不会

http://codepen.io/tomalec/pen/apqgr

shim-shadowdom属性也无济于事。

有什么解决方法，还是我用错了？