问题标签 [shadow-dom]

为了让我的移动网络应用程序保持精简和高效，我试图在任何给定时间限制 DOM 上的元素数量。我打算限制使用 DOM 元素的一种方法是尽可能使用伪元素:before和:after元素来生成内容。

例如，不是用这样的元数据表示一个列表项：

我可以像这样表示它（并使用该content:属性来显示元数据）：

因此，一个 DOM 元素具有数据属性，而不是 5 个单独的元素和可以说是更清晰的标记。
在这里演示：http: //jsfiddle.net/quc8b/2/

这种技术真的会提高性能吗？我的想法是，使用更少的 DOM 元素，javascript 应该可以更快地解析，并且我应该能够更快地添加/删除列表项节点。但是渲染（即绘画、布局和回流）会更快吗？换句话说，CSS 生成的内容渲染/解析是否比传统元素和文本节点更快或更有效？

浏览器如何在渲染树和文档树中内部处理 CSS 生成的内容对我来说是未知的（也许是影子 DOM？）。有没有讨论这个的文章？

这个问题更针对用户创建的影子 DOM 元素，但为了便于访问，我将使用date输入类型来回答这个问题：

比如说我date在我的页面上有一个输入。编辑了一些位，这个（使用 Chrome）的影子 DOM 标记看起来像：

与输入关联的方法和属性date似乎根本没有引用影子 DOM ( JSFiddle )，所以我想知道如何（如果有的话）可以访问这些影子 DOM 元素？

我通过纯 CSS3 显示工具提示，但我唯一的问题是工具提示的内容的长度确实不同。其中一些只有 1 行长，其他长达 4 行。

现在是这些工具提示Shadow DOM元素，那么我如何通过JavaScript（或纯CSS解决方案会更好（也许是CSS calc？））获得这些工具提示的（不同）高度以调整所有工具提示的边距锚元素？

HTML：

CSS：

现场演示：http: //jsfiddle.net/qq3YJ/

我正在寻找一种从 DOM 访问 Polymer 自定义元素上的属性或将数据从 Polymer.register 发送到 DOM 的方法。

下面这个非常简单的元素接受两个值并将它们相乘，将结果放在其result属性中。

如何从外部访问此结果？

So, I am hearing the phrase "shadow DOM" a lot now. Is that the same as a detached DOM element?

If I create a DOM element like this:

$pizza is detached. I can attach it using attach, append or html perhaps.

Is this functionally the same as the concept of shadow DOM, but with some other caveats? What are the differences?

我一直相信您能够访问和覆盖 Shadow DOM 元素的样式。我看到了关于 html5rocks 的文章，它定义了您可以使用哪些 webkit 特定的选择器：http: //www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

然而，当我尝试这并没有按预期工作时 - 似乎某些 sytle 属性无法被覆盖。例如 height 和 width 然而，设置 webkit 外观似乎确实使它看起来像一个按钮。

这是真的？

我想做的是设置范围滑块的样式，以便手柄和轨道可以是不同的颜色。

这是简单的演示： http: //jsfiddle.net/sidonaldson/dCK​​d3 /我可以隐藏按钮，但是当我设置背景颜色时它会弹回来！

我目前正在将我们当前的 Dart Web UI 项目翻译成 Polymer.dart。我们将 Bootstrap 3 用于前端样式和许多 Web 动画（例如下拉菜单、模式、工具提示）。

然而，在我将一个 Web UI 组件翻译成 Polymer 后，所有的 Bootstrap JavaScript 都停止了对子组件的工作，因为它现在被封装在 ShadowDOM 中。要从 Dart 访问 ShadowDOM 中的元素，我必须使用 shadowRoot 字段，而从 Chrome 中的 JavaScript 我必须使用 webkitShadowRoot 属性，但我仍然无法让单个下拉菜单正常工作。

首先，在 bootstrap 中调用 dropdown('toggle') API 后，下拉菜单出现但永远不会消失。此外，似乎不可能检测到单击事件触发了哪个链接，因为该事件是在窗口级别触发的。这意味着我找不到要显示的下拉菜单。

有人有一起使用 twitter-bootstrap 和 Polymer 的经验吗？

我正在 DOM 元素/主机上创建 ShadowDom。通过使用 select 属性，我可以保留（仍然可见）相应的主机 childElements，但是主机内部的文本 childNode 没有被选中，并且仍然不可见。

除了在 childElements 上使用 select 属性之外，您还能保留 ShadowDom 主机的内容吗？

这是我的代码：

http://jsfiddle.net/JgfKz/2/

除了新的 Shadow Dom 和旧的 HTML iframe 元素之外，有没有办法阻止用户在我的小部件内的 DOM 元素上监听[委托]事件？

PS 我听说 Firefox 有 XBL，它具有类似于 Shadow DOM 的功能。目前是否支持？

我不确定发生了什么，但是 <content> 标记中的内容没有根据元素的位置呈现。

我正在使用的元素：

在我的聚合物元素中：

它似乎没有理由不工作。我已经花了几个小时了。不确定它可能是什么。谁能指出我正确的方向。任何帮助将不胜感激。