聚合物和阴影 DOM 外部样式

Question

您好，我正在尝试使用 Polymer 并尝试设计一些聚合物纸模块的样式...在 Polymer 1.0 中，他们在阴影 DOM 模块的 CSS 内部添加了这个新属性。 .. 我正在尝试为 paper-input-container 模块更改依赖于此属性 --paper-input-container-focus-color 之一的颜色，但我找不到任何明确的文档或指南来说明如何实际访问属性来自...

我可以通过 /deep/ 或 ::shadow 将其样式设置为覆盖 CSS 属性但据我了解，这种新方法应该避免使用那些 2...

谁能给我指出正确的方向？？？

澄清：

我对在聚合物中引入的 mixins Google 感兴趣...利用 @apply(--foo-bar)

Answer 1

像往常一样我回答我自己的问题...但我真的希望它能帮助其他人不要像我一样浪费时间..

要利用这个新的 mixins 在外部自定义您的影子元素，您需要在放置自定义标签之前在您的页面中添加一个具有属性 is="custom-style" 的 style 标签。

<style is="custom-style">
    my-custom-module{
        --my-custom-property-color: yellow;
    }
</style>

<my-custom-module></my-custom-module>

聚合物和阴影 DOM 外部样式

Polymer and shadow DOM external styling

shadow-dom

polymer