问题标签 [web-component]

我有这个例子：

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

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

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

作为多年来一直试图通过创建 (HTML) 组件来帮助内容作者开发和维护大型网站的人，我真的很高兴看到 Web 组件在 w3c、google 和 mozilla 中获得关注。但在我看来，规范中没有针对 javascript 库膨胀的措施。

假设我开发A的组件依赖于underscore.js并想要使用组件B，C并且依赖于lodash.js版本 1.* 等。
我看不到任何标记依赖项和库版本的方法。当我们谈论具有多个团队和利益相关者的网站时，这可能会导致图书馆的巨大膨胀。

当前的解决方案是在全球范围内对整个网站的批发客户端框架进行标准化。当您在不同的服务器端框架（如LifeRay（java）、EpiServer（.net）、Django（python）等）中投入大量资源时，这很困难，每个框架都有首选的客户端库。

我认为 Web 组件是一种将服务器端框架与客户端代码分离的手段，但客户端依赖处理的遗漏令人担忧。

是在规范中但我错过了它，还是有缓解这个问题的策略，我不知道？

[提到的图书馆只是例子。问题与框架、库和服务器端语言无关]

更新 感谢大家的回答。我很惊讶没有人提到最近大肆宣传的Mozilla X-Tag或Google Polymer 。我完全接受了影子 DOM、范围样式、自定义元素等的想法，但我没有看到任何关于如何处理 JavaScript 依赖项的提及。正如@Daniel-Baulig 正确编写的那样，HTML Imports根本没有提到 JavaScript。我承认这个问题几乎不可能回答。然而，当@Daniel-Bailig 提到 ES6 模块时，我认为他是最接近的。我个人认为我们会在 ES6 Modules 和 require.js 之间找到一个可持续的解决方案。

我有一个输入流连接到服务器上的文件。输入流是使用 Apache Web Components 建立的。如何将该输入流提供给用户的浏览器，以便文件将使用 Apache Web 组件在他们的浏览器中下载？

假设我正在编写以下 Web 组件或自定义元素：

（github上的polyfill）这适用于Chrome。但是当我尝试在 PhantomJS 中运行它时，我收到以下错误：

如果你想重现，这里是我的 phantomjs 脚本

我尝试过其他 polyfill，例如

• https://github.com/Polymer/CustomElements
• https://github.com/mozilla/web-components

但实际上他们都没有工作。任何想法如何解决这一问题 ？

我刚开始使用自定义元素，根据这篇文章，自定义元素可以定义如下：

这在我的 chrome 浏览器中效果很好，每次我创建一个新元素时都会调用“createdCallback”。

现在，如果我在这里查看官方文档，我看不到任何地方提到的 createdCallback 。有人了解 W3C 文档并能解释为什么会这样吗？

此外，从 Web 组件中查看自定义元素，它们看起来完全不同。所以现在有两种不同类型的自定义元素。这没有任何意义，或者这两者可以一起存在有充分的理由吗？

替代问题版本：在 Polymer 元素定义中添加时，如何防止 HTML 实体被转义？

所以假设这个简化的例子（所有包含的聚合物库都添加到真实代码中）：

元素定义

元素使用

这将导致如下输出：

123&

版本：聚合物 0.1.2

我需要更改/添加什么以获得类似的输出123 &？

或者这是某种错误，我应该让 Polymer 人员知道？

我知道，我可以在其中添加实体，<template>这会起作用，但是我有一些代码，它修改了输入属性并需要使用实体。

一切都很好。

如果我按如下方式创建自定义元素

现在，在此之后我想添加一些该元素的原型。

例如，我可以使用 'div' 元素来做到这一点：

我将如何使用我的自定义元素 'bar-foo' 做到这一点？

HTML 导入是Web 组件规范的一部分，并提供了一种处理 Web 依赖关系的方法。ES6 模块也做同样的事情，但只是针对 Javascript 代码。

两者将如何协同工作有明确的说明吗？

编辑：一个例子：在我最近的一个项目中，我有两个 Javascript 组件（文件），其中一个依赖于另一个，但是任何 HTML 代码（这是另一个组件）都可以使用它们中的任何一个。因此，当我在 HTML 中包含依赖脚本时，我也不想包含父脚本（避免手动依赖处理）。除了将 ES6 模块与脚本包含混合之外，似乎没有明确定义的方法可以做到这一点。我看到的唯一选择是为每个组件维护一个单独的文件，并指定所需的文件和依赖项，例如 component.io。

我很难让我的聚合物自定义元素在容器中呈现内容，<div>而不会<div>出现在轻 DOM 中。

呈现为

谁能给我一些关于如何<div>在 shadow DOM 中呈现包含的见解？