问题标签 [web-component]

可能很简单的问题，我还没有真正找到答案：

ShadowDOM 或 WebComponents（作为更大的标准）是否实际上也封装了 JavaScript？就像为每个组件设置单独的命名空间一样？

从我遇到的 Polymer 情况来看，情况还不是这样，这很明显，因为聚合物正在通过 JS 进行填充。

谢谢！

我目前正在开发一个 angularjs 项目并尝试构建可重用的组件 - 深受这篇文章的启发（这也催生了angular 组件规范）。

我想知道我应该如何打包要包含在组件中的图像/样式表？

我想要的一些东西：

• 萨斯风格
• 在组件目录中存储图像的地方，以及在样式表中引用它们的方法
• 使用组件的应用程序中的可覆盖样式

目前我的想法是：

在我的凉亭组件目录（app/public/components）中创建组件，所以我有

application.scss 将导入组件的样式，例如

我不确定的事情：

• 我应该如何引用图像 - 如果应用程序开发人员的路径发生变化怎么办？在组件中为该路径创建一个 sass 变量？
• 我将如何覆盖应用程序中 sass 文件中的变量？我希望应用程序开发人员这样做吗？似乎如果你在 sass 中覆盖一个变量，它会从它改变的地方向下传播，所以应用程序只能自己改变它。
• 导入时可以将路径传递给 sass 文件吗？

我的用例特定于 angularjs，但我确信同样的问题适用于W3C web components以及像polymer和mozilla brick这样的库。

有任何想法吗？

编辑：views文件夹与同一级别assets

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

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

我正在尝试使用polymer包裹一个按钮。

HTML：

JS：

我不确定如何允许该聚合物元素的用户收听单击事件或悬停事件。此外，在两个按钮被包裹在该聚合物元件中的情况下。

在 Web Components工作草案（第5.2节）中，我偶然发现了这个结构：

当以这种方式使用时，我可以引用tickvia this( this.tick)——至少在同一个脚本元素中——参见5.3的例子。

这个结构({ tick: ... })叫什么？这个怎么运作？这是哪个规范的一部分？

澄清：我的问题是为什么this.tick假定工作？我无法重现它以在浏览器中工作。

编辑：正如W3C 的 webapps 邮件列表中的这封电子邮件中所述，我所指的部分规范现在已经过时，部分原因是this-> 我所询问的原型绑定。

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

我正在使用的元素：

在我的聚合物元素中：

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

我开始在飞镖环境中使用聚合物。现在我想创建像“GWT cell table”或“GWT RichTextArea”这样的元素。

在聚合物元素中，我找不到这样的小部件。

我必须手动实现这些，还是像这样的小部件的其他（更高？）库。

感谢 Mica

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

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

我最近开始使用 Ember.js，并且已经了解了 Web 组件。我以前使用过 jQuery UI 小部件，它们看起来是一样的。Web 组件和小部件之间是否有区别，或者它们或多或少是相同的东西？

我正在探索 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