问题标签 [shadow-dom]

我有一个自定义 Polymer 元素，用于表示复杂的输入类型。input它在其 Shadow DOM中包含一个实际标签，如下所示：

目前，当用户在自定义元素的内部输入和其他区域之间单击时focus，事件会泄漏给外部侦听器。blur如果您在此 CodePen中打开开发工具控制台，即使在输入和周围的绿色区域（都在自定义元素内）之间单击时，您也会看到内部和外部焦点和模糊事件发生。

有没有办法在我的自定义元素中捕获focus和blur事件，所以我只能在实际聚焦和模糊整个自定义元素时触发它们？

我正在尝试为 contenteditable 创建一个 Polymer 元素。

我创建了一个contenteditablediv，放在this.innerHTML那里，它就变成了可编辑的。使用 polyfill 都很好，例如在 Firefox 中。但它不适用于带有原生 Shadow DOM 的 Chrome 35。

好吧，它仍然是可编辑的，但既不工作document.execCommand也不window.getSelection工作。

• document.execCommand什么也没做。
• window.getSelection().getRangeAt(0).toString()已定义但为空。
• 没有显示错误。

所以我无法为选择设置样式。

有人知道是否可以制作自定义可编辑元素吗？我究竟做错了什么？也许在现代/未来的网络中还有另一种使用 contenteditable 的方法？

我正在使用 Angular Dart 开发一个大项目。Javascript 将使用 dart2js 从 Dart 生成。该项目目前针对的是 Google Chrome，但将来它也应该可以在 Firefox 中运行。

一切都很好，直到上周 Google Chrome 35m 出现。所有Component的样式表都损坏了。看起来applyAuthorStyles在 Google Chrome 35m 中不起作用。

我花了很多时间研究，最后想出了以下解决方案：
在useShadowDom: false声明一个Component. 它让我重构Component了我项目中的每一个存在：

• 删除cssUrl. 我必须将每个样式表移动Component到一个（或多个）样式表文件中并将它们导入index.html
• 重新实现 everyShadowRootAware.onShadowRoot因为方法不接受ShadowRoot作为其参数
• 重新测试（当然）

正如你所看到的，如果我应用这个解决方案，还有很多额外的工作。

我想知道是否有比我更好的解决方案？

编辑

我想我应该解释一下我的代码结构，以帮助大家更好地理解我的问题。

• 我的项目中有很多Component。每个Component有 3 个文件：1 个 CSS 文件（范围）、1 个 HTML 文件和 1 个 dart 文件
• 我有一些全局 CSS 文件并在入口 HTML 页面 (index.html) 中导入它们
• 在 Chrome 35m 中，Component即使我设置了 HTML in 也没有来自全局 CSS 的样式applyAuthorStyles: true（applyAuthorStyles已弃用）

我只需要一个Component使用全局 CSS 设置样式的解决方案（例如，来自 CSS 框架），代码更改最少。

是否可以使用 Selenium/Chrome webdriver 访问 Shadow DOM 中的元素？

正如预期的那样，使用正常的元素搜索方法不起作用。我在 w3c 上看到了对switchToSubTree规范的引用，但找不到任何实际的文档、示例等。

有人成功了吗？

语境：

我正在对不同上下文中的 Web 组件组合进行测试。特别是我试图通过在所涉及组件的DOM/Shadow DOM中的搜索过程从另一个 Web 组件访问其中一个来关联多个 Web 组件。

问题：

假设我们有一个名为x-foorequires to access another的 web 组件x-randgen。后一个组件公开了前者使用的业务方法。为了避免两个组件之间的紧密耦合通信，我想使用发现机制x-foo来x-randgen通过跨模型DOM的搜索过程进行访问。Shadow DOM特别是，我确定了两种可能的情况。两者都x-foo和x-randgen实例化都在全局上下文（index.html）中，或者它们都出现在另一个模板中，比如x-bar. 问题是搜索过程在每种情况下都应该以不同的方式实现。下面我展示了一个伪代码，我的方法从本质上总结了我的问题。（全局示例可以在这里找到：http://jsbin.com/qokif/1/ )

问题：

如果有人可以根据 Polymer 技术以适当的术语重新编写上面的代码段，我将不胜感激。

我们正在为我们的客户开发一个应用程序，该应用程序将 dart lang 与聚合物组件一起使用。我们的自定义组件之一，即 datagrid<div contenteditable></div>用于向 datagrid 单元格输入值。我还想提供自定义格式化功能，所以我不得不覆盖按键事件。当我想在 Chrome 35 中的内容可编辑div元素中的插入符号位置创建新的 HTML 节点时，问题就出现了（可能是所有原生支持 Shadow DOM 的 webkit 浏览器，而不是通过 polyfills）。

当我window.getSelection().getRangeAt(0)用来获取当前插入符号位置时，新节点被添加到body元素的开头而不是div。在 Firefox 和 IE 11 中，它运行良好（使用 polyfill）。

当我按照此处this.shadowRoot.getSelection().getRangeAt(0)的建议尝试时，它并没有很好地工作，因为它返回了不正确的 Range 对象（错误或功能？）。但是，当我记录 Selection 对象时，似乎所有偏移量都是正确的，因此这意味着它可以以某种方式解决，但是在 SO 上提出类似问题的人没有发布他是如何做到的。

所以我不知道，当内容可编辑的div包含多个 HTML 节点时，如何从给定的偏移量创建 Range 对象，因为浏览器喜欢在您将换行符放入单词中间并立即删除它时创建多个节点（如一个附带的问题，它是否正常？它不会导致内存泄漏吗？）。然后在 Chrome 控制台中看起来像这样（#cell-input 这里有 4 个节点，尽管它只包含连续的字符串“Marek”）：

我尝试使用类似的东西（它只是一个伪代码）：

...但它没有正常工作。有任何想法吗？

我正在处理一个使用 ReactJS 的项目，我想修改主题。我在为我的主题样式编写 css 选择器时遇到了问题。看起来 reactjs 使用了一些影子 dom，它打破了跨组件的 css 选择器。看起来聚合物使用 shadow dom 打破了组件之间的 css 选择器（按设计）。

我希望child-element根据添加到根元素的类来更改 的背景颜色。

PS - 该项目还使用了polymer.js，这可能是shadow dom的来源吗？

更新

经过一些研究，并看到下面的答案之一，聚合物确实是阴影 dom 的原因。

我已经制作了这个 Gist来显示问题，但基本上我发现 usingshadowRoot.innerHtml = '...'有效但 usingshadowRoot.appendHtml('...')不起作用，它会导致控制台警告Removing disallowed element <STYLE>，我无法解释。任何人都知道这是否很简单，或者它是否特定于 Dart？

我正在创建一个“径向选择器”自定义元素，它在鼠标输入和鼠标离开时动画。

我希望我的自定义元素的用户能够使用径向选择器标签来包装他们自己的内容，如下所示：

我试图在不将它们带入我元素的阴影 DOM 的情况下为 light DOM 子级设置动画，这对于这项任务来说似乎有点矫枉过正。出于明显的封装原因，我希望这些动画的定义存在于自定义元素的模板标签中。我认为这一切都是可能的，因为您可以使用插入标签向自定义元素显示轻量级 DOM 节点，然后使用 ::content 伪选择器以 CSS 样式定位插入的轻量级 DOM 节点。

这就是我在以下径向选择器 html 定义中尝试做的事情：

但是，该元素根本没有动画。我添加和删除适当的类以响应适当的事件，检查器显示类/样式发生变化。

::content 伪选择器适用于应用常规样式（例如，位置：绝对），但不适用于 -webkit-animation 属性。也许是因为 @keyframes 定义仍然完全存在于影子 dom 中？没有办法向它们添加 ::content 伪选择器，对吧？我试过 ::content @keyframes ..etc。但没有运气。

我是否必须硬着头皮将 light DOM 子项带入 shadow dom？或者有没有办法使用自定义元素中定义的 css 动画来为轻量级 DOM 子级设置动画？

由于shadow_dom已被正式弃用并遭受一些痛苦的错误。我想知道使用 pub 页面中建议的 web_components 是否安全。虽然 dart-angular教程仍然使用 shadow_dom