【发布时间】：2018-02-27 13:26:21
【问题描述】：
我使用 Polymer 2 创建了一个 Web 组件。它的代码使用 es5-bundled 预设转换为 ES5。该组件部署在 CDN 上，并在不使用 Polymer 的第三方页面上导入。
下面是一个用法示例：
https://noticeable-widget-demo.firebaseapp.com/issues/shadycss/index1.html
有 3 个 Web 组件实例noticeable-widget。
如果样式在 custom-style 中定义，我可以成功应用自定义 CSS 类。但是，应用样式后，其他 2 个实例根本不会显示。如果我删除 custom-style 定义，那么所有实例都会正确显示其默认样式：
https://noticeable-widget-demo.firebaseapp.com/issues/shadycss/index2.html
知道为什么会这样吗？如何将不同的样式应用于同一自定义元素的不同实例？以及如何在定义 CSS 类时保持默认组件样式正常工作？
另外，如果我不把 style 定义放在 custom-style 中，那么定义的 CSS 类对 Chrome 没有影响。为什么？在reading the documentation 之后，我了解到 custom-style 是否存在用于未实现 Shadow DOM v1 但 Chrome 61 的浏览器，对吗？
【问题讨论】：
-
Ca peut venir de ton explorateur, tu as essayé de le mettre à jour ? J'ai essayé dans Firefox et Chrome et je vois aucun problème。 La 1ère et la dernière instance sont plus petites et rouges par rapport à la 2ème qui est un peu plus Grosse et avec le gradient orange c'est ça ? Aussi, as-tu essayé d'importer
polymerplutôt quepolymer-element? Le fait d'importer Polymer ça importe d'autres mécanismes, comme la possibilité d'utiliser des mixins css (avec@apply) qui sinon n'est pas supporté dans tous les explorateurs。 -
@user544262772 糟糕，链接指向了错误的资源。我在昨天晚上进行了更新，但没有更新我帖子中的链接。它解释了为什么你没有得到和我一样的行为。如果您重试，您现在应该会看到问题。仅供参考，我使用的是 Chrome 61，这是目前最新的稳定版本。此外，我与 Polymer 团队成员讨论过，对他来说，这似乎是 shadycss 的错误。
标签： css polymer shadow-dom polymer-2.x custom-element