问题标签 [web-component]

正如Rob Dodson 所说，标签style现在在 Web 组件中是不可避免的。我试图找到一种方法来使用这种新技术的 LESS，而不必在每次更改 LESS 文件中的某些内容时将编译后的 CSS 粘贴到我的 HTML 文档中。有没有办法做到这一点？

我正在使用聚合物。

谢谢！

洛朗

影子根是否总是可以从与根本身相同的窗口/框架/页面中的任何 javascript 上下文访问？

如果是，则无法通过将数据放在影子根中来隐藏网络抓取工具中的数据。

如果它并不总是可访问的（例如，如果存在某种奇怪的“跨源”安全策略），那么在元素的影子根中呈现的（对用户可见）但不是逻辑 DOM 内容可能无法被某些 javascript 上下文访问该页面 - 因此允许从（非极端 OCR）刮刀中隐藏该数据。

由于我从事数据抓取业务，我希望是前者！

我正在向自定义元素中的 Bootstrap 选项卡框添加选项卡和选项卡窗格。有时它们会出现，但通常不会。有时会出现窗格，但不会出现选项卡。每次重新加载的结果都不同。如果它没有出现，则通过调整浏览器窗口大小或打开 Dartium 检查器等方法导致回流，使其突然出现。

我正在使用聚合物 0.9.5。这是HTML：

这是飞镖类：

我使用 Polymer 构建了一个应用程序，并按预期工作。我想用完全自定义的外观和感觉来设计它。

是否可以通过标志或某种迂回方式禁用 Polymer 元素的默认样式，或者我是否必须手动覆盖我想要更改的所有内容？

我在最新的金丝雀上尝试了我的网站（http://fnndsc.github.io/fnndsc.babymri.org/），很多事情都搞砸了。

更重要的是，样式不再向下传播到子元素。我四处阅读，但找不到处理该问题的最佳实践。

我怎样才能告诉我的聚合物元素使用它父母的风格。有特殊的标志可以打开吗？

直到 Chrome 34 都可以正常工作，但 35/36 似乎已损坏。

谢谢

有没有办法以编程方式将内容从 lightDOM 分发（插入）到 ShadowDOM？

我想将每个子节点包装成一个元素。例如 ：

分发为

我不仅需要它以这种方式呈现，而且还需要委托整个 HTML 行为（绑定、事件等），因为每个分布式节点都可能包含整个应用程序。

我尝试在回调时将<content select=":nth-child(..)">元素附加到模板attached

但它不起作用（可能是因为内容已经分发）。

在这里提琴

一般来说，我想要实现的是类似http://jsbin.com/hegizi/3/edit的东西，但没有硬编码类名，并使其与可变数量的子节点一起工作。

更重要的是，似乎:nth-child本机不支持：https ://github.com/Polymer/polymer/issues/470

我可以使用以下 html制作一个Polymer复选框：

以下是完全相同的，只是ariachecked现在是aria-checked并且role-checkbox1不是 role-checkbox2。这似乎不起作用。有没有办法可以使用aria-checked属性？我可以将此属性绑定到另一个命名属性吗？

工作示例（单击两个框，只有左边的一个在工作）

这是我关于 Web 组件的一个大问题；Web Components 的承诺是它们是通用的可重用组件，任何人都可以使用和运行；最终能够创建和重新组合 Web 组件以构建自己的应用程序并采用现有的应用程序。

然而，如何实现这样的愿景出现了一个大问题，例如：

1. 我们有一个应用程序的想法，我们为应用程序创建一个存储库，我们在应用程序存储库中创建 Web 组件

2. 我们有一个应用程序的想法，我们为应用程序创建了一个 github org，我们为每个 Web 组件创建了一个 repo

选项 1 似乎会减少大部分开销，但会增加碎片量，降低可发现性，并阻碍新贡献者的加入（因为他们现在面对的是整个应用程序，而不仅仅是 Web 组件）。

选项 2 似乎会增加开销，但会减少碎片量，同时提高 Web 组件的可发现性以及贡献者启动和运行 Web 组件的能力，因为维护团队可以一起维护相同的 Web 组件.

然而。选项 1 虽然增加了碎片化，但似乎更好地满足了 Web 组件随着时间的推移而发生的演变，而选项 2 会看到很多不推荐使用的组件，以支持在开发过程中稍后开发的更好的组件。

然而。然而，上述情况可能会被社区一致同意的弃用比公司分散更好的事实所抵消。例如，最好有 a、b 和 c，其中 c 是最新的 web 组件。比拥有company1-a，company2-a，company3-a，它们都得到维护。

那么，在实现 Web 组件的承诺的同时找到实现它们的良好平衡的方法是什么？

问题：

在 Web Components 规范中，当您想Light-DOM从模板中读取 a 中的<content select></content>元素时，可以使用该元素。但是，如何从组件的 javascript 代码中检索到这些信息？

例子：

在此先感谢，哈维尔。

我一直在玩 Angular Dart。我非常喜欢它，但是我遇到了关于组件和 Shadow Dom CSS 封装的问题。

据我所知，组件内部定义的样式应该只适用于 Shadow Root 内部。Chromium 中的一切都按预期工作，但是当我在其他浏览器（甚至 Chrome）中运行我的应用程序时，组件的样式也会应用到 Shadow Root 之外。

预期行为：一个样式按钮和另一个没有样式的按钮 但是，使用其他浏览器运行从 Dart 编辑器生成的 javascript 版本，我得到两个样式按钮。

这是我的主要应用程序代码

我的主要 CSS 文件是 Dart 编辑器生成的默认 CSS。我只为 ng-cloak 和 #basic-example id 添加了样式（与按钮无关）

组件的 dart 代码也很简单：

这是组件的 html 模板：

应用程序的主 HTML 只是实例化了组件和另一个不应设置样式的按钮：

正如我之前所说，我希望只有一个样式按钮，因为应用于组件的样式不应该应用于外部，但是在从 Dart 编辑器生成的 javascript 版本中，我得到了两个样式按钮。

我正在使用 AngularDart 0.9.10 和 Dart SDK 1.2.0。

难道我做错了什么？也许我不理解 CSS 封装的概念。有谁能够帮我？

提前致谢