问题标签 [shadow-dom]

我对所有 Shadow DOM 和 Web 组件的东西都很迷茫，所以请原谅我......

我认为 Shadow DOM 的想法只是让您的应用程序中的所有数据都存在于一个数据结构中，其 API 的工作方式与传统 DOM 完全相同。正确的？

其目的仅仅是通过提供一种事实上的标准方式，恰好使用每个人都已经熟记的 API，从而使对大多数人来说更容易处理数据、处理数据、归档和查询数据。正确的？

如果是这样，有什么方法（图书馆？）我现在可以开始用这种做事的方式弄湿我的脚吗？

有没有办法像使用 Chrome 开发工具一样检查 Firefox 中的 Shadow DOM 元素？

我想将“Shadow DOM”一词正确翻译成俄语。但我不确定“影子”这个词最合适的含义是什么。因此，我编写了一个包含不同含义的列表。请帮我选择一个最好的。

• 阴凉处, 鬼, 黑暗, 反射, 织布机
• 鬼, 幽灵, 幻影, 幻影, 幽灵
• 黑暗, 阴沉, 默默无闻, 晚, 阴暗
• 暮色，半黑暗，阴影
• 暗示，典故，参考，建议，暗示
• 覆盖, 覆盖, 面纱, 外套, 毯子
• 次要的，编外的

我试图弄清楚如何让一个组件呈现它的孩子。

所以我可以编译：

变成这样的东西：

Angular.Dart 中有类似 ngTransclude 的东西吗？

我有一个自定义元素，它本身承载一个自定义元素。

现在在attached()（或其他一些回调）中，PolymerFlexLayout我想设置flex-nonvisual元素的类属性。

在 Javascript 中，代码看起来像this.parentNode.host.classList.add('someclass');

在 Dart 中attached()（在调用 之后super.attached()）this.parent为空，我找不到对宿主元素的任何其他引用。

我怎样才能在 Dart 中做到这一点？

• 我有两个包含几个聚合物定制元素的包。
• 每个包都导入另一个包
  • 一个包包含使用或派生自另一个包中的元素的元素。
  • 另一个包使用仅在演示页面中导入的包中的元素，以使它们更具吸引力。
    元素之间没有循环依赖。
• 在每个包中，我都有一个文件夹“示例”，其中包含每个自定义元素的演示页面。
• 我使用 pubspec.yaml 和 pub build 中的转换器配置来构建演示页面的 Javascript 版本。
  （因为 pub build 还不支持入口点的示例目录，所以我创建了一个指向示例的符号链接 Web。）
• 当我执行 pub build 时，示例已构建，其中一些工作正常。
  并非全部，因为变压器存在限制：

使用转换器构建的 pub 不支持在 pubspec.yaml 中配置转换器的导入包。

所以我的新方法正如 Dart web-ui 小组所建议的那样

• 我创建了一个新包
• 新包使用自定义元素导入两个包。
• 我将两个自定义元素包中的所有示例文件符号链接到新包的 web/ 和 web/src 目录。

当我执行 pub build 一切看起来都很好但是当我打开演示页面并调试它们时，我看到没有xxxChanged任何自定义元素的方法被调用（除非它们被显式调用进入查看 attached或ready）。其他方法如进入查看 attached或者ready被调用。

文件之间的差异（大约 14k 大小）显示了几个较小的差异，但大多数（大约 98%）是相等的。生成的代码（未缩小）至少对我来说不容易破译，而且我没有发现任何可能导致这些差异的提示。

任何想法可能是该问题的根源？

我刚刚开始编写一个 Web 应用程序，我认为使用 Dart 和 Angular.dart 会很有趣。我用过一点 Dart 和 Angular.js，我喜欢它们。

不过，我希望该应用程序实际上可以被大多数互联网用户使用，而且似乎 Angular.dart（或至少一些 Angular.dart）依赖于影子 dom。据我所知，Chrome 是唯一支持 shadow dom 的主流浏览器，即使 Firefox、IE 和 Safari 都实现了它，也可能是几年后的事。

我实际上尝试使用 dart2js 编译器从 Angular.dart 教程运行第 3 章，它制作的页面在 Chrome 中似乎运行良好，但在 Firefox 和 IE11 中失败。

我这里的评价准确吗？Angular.dart 至少要在几年后才能在 Chrome 之外使用？Angular.dart 是否有计划允许替代它对 shadow dom 的依赖？

我担心我会被迫在 Angular.js（几乎没有那么有趣）和 Dart 之间做出选择，也许只有 Polymer.dart（结构不那么好/容易）。

在 Rob Dodson 关于 Web 组件的一次演讲中，他提到了全新的“猫”^^和“帽子” ^CSS 选择器，我询问了将样式应用到自定义元素的 ShadowDOM 以及浏览器原生的可能性元素的 ShadowDOM？

是否可以对 ShadowDOM 中的元素进行样式设置？在哪些浏览器中以及如何使用？我发现的唯一相关文章是 Dimitry Glazkov 的“ Shadow DOM 到底是什么？-webkit-appearance: none;'，在那里他展示了通过使用伪选择器和规则进入 ShadowDOM 子树。

我正在探索 Chrome Canary (33.0.1712.3) 中的导入、模板、影子 DOM 和自定义元素。在网格布局中，我有一个特定的内容元素（显示区域），它将显示不同的 Web 组件或从文件导入的克隆轻 DOM 片段。

但是，一旦添加了影子 DOM，我就无法重新显示普通的 HTML DOM，因为我不知道如何删除影子根。一旦创建，影子根就会保留并干扰普通 DOM 的渲染。（我查看了各种 W3C 规范，例如 Web 组件介绍、影子 DOM、模板、Bidelman 关于 HTML5 Rocks 的文章等。）我在下面的一个简单示例中隔离了这个问题：

点击“显示普通的旧div”；点击“显示阴影模板”；单击“显示普通的旧 div”。每次单击后在 devtools 中检查。第三次单击后，按钮下方没有输出，我在 devtools 中看到：

我需要添加什么到 removeShadow() 以删除影子根并将内容元素完全重置为其初始状态？

移除_shadows.html

我有这个例子：

http://codepen.io/dbugger/pen/IuDxw

我在 Shadow DOM 中有一个插入点，我尝试对其应用样式，使其消失。但图像仍然可见。我怀疑有一些原则我没有从 Web 组件中正确理解。

有人可以解释一下我做错了什么吗？