问题标签 [shady-dom]

我们在使用 safari 浏览器上的 selenium web 驱动程序自动化 shadow dom 元素时遇到问题。

我们面临的主要问题是我们无法将密钥发送到位于 shadow-root 中的文本框。我们尝试使用 javascript 设置教科书的值，但这也不起作用。

上述功能在 Firefox 上运行良好，但问题出在 Safari 上。

我正在开发一个通用的 Web 组件，用 Polymer 包装一个基于 jquery 的网格库。如果我使用默认的shady DOM 全局设置，我发现库附带的自定义主题可以正常工作，但是在使用 shadow DOM 时需要进行重大调整才能使其正常工作。

问题是如何最好地支持两者？

天真地，我希望这样的伪标记能够工作：

而且我只想要全局设置指定的所需文件，因此如果启用了 shadow dom，则不会请求 shadyDomStyles.css，如果启用了 shady dom，则不会请求 shadowDomStyles.html。

有什么建议么？

我有一个由两个元素组成的简单 Polymer 应用程序。第一个元素x-app具有第二个元素x-inner，位于其本地 dom 中。在 x-inner 元素中，我定义了一个称为spin的关键帧动画，我将其应用于 :host。在 x-app 中，我也应用了相同的动画名称spin，但未定义关键帧动画。虽然，旋转动画适用于这两个元素。在我看来，@keyframe 从内部元素中泄漏出来。

这是预期的行为吗？还是我错误地定义了@keyframe 动画？

请参阅我的 jsbin 示例：jsbin

https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom

这让我很兴奋，我可以在没有聚合物的情况下从头开始编写自己的自定义网页。

例如，仅找出 css:host在 Edge 和 FireFox 中不起作用。我现在可以不用 html 来处理import，直到 w3c 弄清楚他们想用 es6 模块做什么，但是每个浏览器都有自己的一半实现了没有 css 的 Shadow DOM 版本正在推动我的按钮。

所以我仍然需要一个完整的聚合物堆栈来在所有浏览器中拥有 web 组件。

<script src="../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../hello-world.html">

<hello-world>Hello World Polymer 2.x</hello-world>

有谁知道如何填充 Edge 和 FireFox 以拥有一个真正的 Shadow DOM，而不是假装的原生 Shadow DOM？

这是我尝试过的，但我不知道如何告诉 Edge 和 FireFox 将他们的影子崇拜者放在其他地方并使用 shadydom/shadycss。

https://jsbin.com/quvozo

Polymer 1.x 默认使用Shady DOM，但可以在初始化时通过window.Polymer在导入前设置对象来更改，polymer.html如下所示：

但是，Polymer 2.0 似乎使用Shadow DOM，而不管window.Polymer = {dom: 'shady'}. 如何切换到 Shady DOM？

我正在尝试使用 WebComponents。我使用 Shady DOM 来处理尚不支持 Shadow DOM 的浏览器（Mozilla 和 IE）。

我发现ShadyDOM 中的shadow.appendChild 比ShadyDOM 慢得多。

这是 Shadow DOM 和 Shady DOM 的 JS Fiddles。

黑幕：https ://jsfiddle.net/lnaravindan/Lhrzapmt/3/

用过的

影子王国：https ://jsfiddle.net/lnaravindan/L74vju6m/4/

避免了ShadyDOM

您可以在两个小提琴中检查控制台，了解将内容附加到 Shadow Root 所花费的时间。

将内容附加到阴影的平均时间：

Shadow DOM 为 0.06 毫秒

Shady DOM 为 0.65ms

由于我有许多自定义元素，因此这种差异占了很大的比重。

对此有什么想法吗？

Polymer 的 paper-input 元素在与 shady DOM 一起使用时允许两种方式绑定 value 属性。但它不允许与 Polymer 2 进行双向绑定，因为 Polymer 2 使用影子 DOM <paper-input label="User Name" value="{{username}}"> </paper-input> 这里有一个可能的解释https://github.com/PolymerElements/paper-input/issues/297 但我不确定我是否理解正确或者我错过了一些东西。很难相信纸张输入从未打算双向绑定？

我试图让我的paper-dialog滚动使用paper-dialog-scrollable，但我不能让它工作。我试图尽可能地简化我的代码，几乎只包含ctrl+c来自ctrl+vgithub 上演示的代码。

https://github.com/PolymerElements/paper-dialog-scrollable/blob/master/demo/index.html

但它似乎paper-dialog-scrollable根本没有做任何事情。（表现得好像它没有任何逻辑并且是简单的元素）与演示页面唯一不同的是我使用的是shady dom而不是shadow..（顺便说一句，是的，我将文件导入到我的项目中）

有人遇到同样的问题吗？有没有人在使用这个元素shady dom以及如何使用？

我有一个 v0/Polymer 1 Web 组件，我正在升级到 v1/Polymer 2。这个 Web 组件动态构建一个加载外部 JavaScript 文件的 URI。外部 JavaScript 文件运行并将一个加载<iframe>到<div>我的组件中。这个外部 JS 包含document.getElementById加载<iframe>到指定的<div>.

我已经搜索并没有找到一种方法来强制将<div>元素暴露/放置在阴暗的 DOM中。我已经读过，如果我设计没有影子 DOM的组件，则不会显示任何内容。

无论如何我可以使用外部脚本（第三方）将其更新到 Web 组件 v1/Polymer 2 仍document.getElementbyId用于修改<div>Web 组件内部吗？

更新 我发现我可以强制 webcomponents 使用 shadow dom <script>window.ShadyDOM = { force: true };</script>，<script src="/bower_components/webcomponentsjs/webcomponents-lite.js" shadydom></script>但是我仍然无法通过 ID 访问元素，并且我不想强制所有其他 webcomponents 使用 shady DOM。仍在寻找可能性。

我正在制作一个 Firefox 插件，并且我了解到 Firefox 不支持 attachShadow 功能。因此，我正在尝试使用 Shadydom，现在它将内容应用到 div，其中应该添加阴影根，但它似乎无法正常工作。我有一个<style></style>里面，但它似乎影响页面的其余部分，所以影子根一定没有正确创建？

shadydom.min.js 加载到 manifest.json 文件中。

这是我用于创建影子根 dom 的代码。顺便说一句，var shadow之前已经在代码中定义了。

然后我加载一个 HTML 字符串并像这样附加它shadow.innerHTML += htmlString

在这个字符串里面有样式和 html 代码，我有链接的全局样式，但它也会影响页面上的所有其他链接，如果它被创建，它应该在 shadow dom 之外。

此外，由于 Firefox 还不支持 shadow dom，我实际上无法查看 shadow dom 是否是使用检查器工具创建的。任何人都知道我能做什么？