问题标签 [shadow-dom]

所以我读过这篇文章，据我了解，每个原生浏览器小部件实际上都是基本元素、样式和脚本的组合。这就引出了一个问题——如果它们由基本的构建块组成，这是否意味着可以通过 JavaScript 自定义它们？而且我的意思并不是像某些 JavaScript 库/插件那样以替代方式 - 例如，只需访问它们的“Shadow DOM”属性并向它们添加一些 CSS 样式。此外，此页面有一些用例，但没有任何实用性。

有人尝试过这样的事情吗？有可能吗？缺点？

谢谢。

有一个有效的 JS Fiddle在这里演示了Shadow DOM 。（注意：需要进行一些设置才能使其正常工作。我使用的是 Google Chrome 版本 20.0.1132.47 测试版，通过启用“Shadow DOM”实验）chrome://flags

我在这里创建了一个使用 abutton而不是a 的修订版，但span它不起作用。它抛出一个：

知道为什么可以将 Shadow DOM 添加到 aspan而不是 abutton吗？

我正在为我们公司编写 RIA 系统（仅限 chrome）。不同控件的数量在增长，我决定使用 Shadow DOM 来简化代码。这很棒，但有时需要外部重新设计。这就是问题所在，例如：

任务栏：

使用 Shadow DOM，applist 转换为：

在这种情况下，我需要<scroll-slider />根据<taskbar />边设置样式（在所谓的属性中指定，可以动态更改）。不幸的是，我不能只写taskbar[side="top"] scroll-slider {...}，因为只允许下边界封装。

有没有办法从“另一边”选择元素？或者可能是类似的东西video::-webkit-media-controls-panel？

我对即将推出的名为“Shadow DOM”的标准感兴趣，该标准目前没有默认浏览器支持。但是服务器端仿真呢？我的意思是类似于模板引擎中的自定义标签，但具有与 W3C 工作草案兼容的内部 CSS 和 JavaScript 命名空间，因此当浏览器开始支持它时 - 模板引擎将使用 shadow-dom 而不是预处理的纯 html 大便。如果浏览器对 shadow-dom标准有不同的理解，这也会很有用。是否有任何实现，是否合理？

Goal: an encapculated widget

Suppose I'm the developer of a widget showing a list of friends, such as:

Your friends Michael, Anna and Shirley love this webpage!

First approach: script that creates span

Naively, I create a script which places this information in a span on the website. However, the owners of ExampleSite can now access the names of your friends by simple DOM operations!
That's a big privacy / security issue.

Second approach: an iframe

I don't want ExampleSite to have access to their friends' names. So instead, I let website owners add the widget with an iframe:

This works, because the owners of ExampleSite cannot scrape the contents of the iframe. However, this whole iframe thing is rather ugly, because it does not integrate into the styling of the website, while a span does.

Desired approach: Shadow DOM

When reading about Shadow Dom yesterday, I wondered whether that could be a solution to both issues. It would allow me to have a script that creates a span the original website cannot access:

However, **does a Shadow DOM hide its contents from the surrounding page?**
The assumption here is that nobody except my script can access `root`, but is that correct?

The Shadow DOM spec after all says that it offers functional encapsulation, but I actually want trust encapsulation. And while the Component Model Use Cases actually list this use case, I'm not sure whether Shadow DOM realizes the necessary confinement property.

我希望在页面的多个位置呈现“相同”的 HTML 元素。这个元素是脚本/动画的，各种渲染需要保持同步。

我考虑过的解决方案包括：

1. 将元素的副本放在多个位置并更新所有位置。这是我试图避免的。
2. 将元素的副本放在多个位置。更新其中一个副本，并使用突变事件来捕获这些更改并针对其他副本重放它们。似乎工作量很大。
3. 使用影子 DOM。我对这个替代方案寄予厚望，它最初似乎是可能的，使用“插入点”，它允许这里的 DOM 子树虚拟地放置在那里的 DOM 子树中。

我还没有测试过Chrome 25 中提供的最后一个替代方案。W3C 规范说：

值得特别考虑的一种情况是插入点是另一个影子主机的子节点的情况......一个节点被分布到多个插入点的效果称为重投影。

但是之后...

尽管在重投影期间被分配到多个插入点，但由于重投影发生的约束，节点仍然只渲染一次：由于插入点仅在它们是影子主机的子节点时才受到重投影，因此它们是从未渲染。相反，阴影树被渲染在他们的位置。

影子 DOM 似乎有可能做我想做的事情并且值得测试，还是有其他推荐的方法？

我有一个input type=range滑块，它代表视频的进度条。此滑块被包裹在一个较小的容器内，因此当滑块上的拇指到达容器边缘时，容器向左滚动到足以使拇指再次可见。因此，我需要检测何时发生这种情况。我不能使用视频的 timeupdate 事件，因为它在单击滑块后也会触发，但在这种情况下容器不应该滚动。我也不能使用 jQueryUI 滑块，因为它不如 HTML 滑块精确...

我想我需要找到一种方法来检测拇指像素的实际位置。不幸的是，这是一个影子 DOM 元素......有没有办法用 javascript/jquery 获得它？

更新：这是 Chrome 呈现<input type=range>DOM 元素的方式，如开发人员工具中所示：

我想要做的是检测滑块拇指 div 的位置（绝对或相对）而不寻找它的值。

我正在为 的阴影 DOM 元素编辑 CSS input[type=range]，并且我想扩展滑块拇指以覆盖下面的 div，为此，我必须将position拇指设置为fixed。问题是，在下面必须位于拇指下方的 div 中，我有一些 div 具有position: relative（并且不能以不同的方式定位），它们以某种方式将它们放在前景中，覆盖拇指。

这是代码。但是我做了一个jsFiddle来更好地解释我的问题。

HTML

CSS：

基本上，我希望黑条覆盖黄色 div，而不position: relative从该 div 中删除属性。那可能吗？

Shadow DOM W3C 草案能否通过提供用于搜索和遍历 DOM 的自定义函数在 JavaScript 中进行 polyfill？这已经完成了吗？我发现的尝试是相当温和的垫片，并且似乎没有做出太多努力来模仿规范。

我很感激这不是一件容易的事，但肯定有人仔细考虑过吗？

我正在 html5rocks 上玩Shadow DOM 101 教程。我正在使用 Chrome 25.0.1364.172，当我尝试访问appendChildShadow DOM 根目录（如教程中所示）时，我得到一个 Uncaught Error: NotFoundError: DOM Exception 8. 我想我错过了一些明显的东西，但我不知道是什么。这是代码：

由于我的浏览器不支持<template>教程中显示的新标签，因此我将其更改为<script type="text/x-tmpl">.

编辑：当我尝试时，我从控制台收到同样的错误：