【问题标题】:Polymer and shadow DOM external styling聚合物和阴影 DOM 外部样式
【发布时间】:2015-06-05 16:28:59
【问题描述】:

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

我可以通过/deep/::shadow 设置覆盖CSS 属性的样式,但据我了解,这种新方法应该避免使用这两个...

谁能指出我正确的方向???

澄清:

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

【问题讨论】:

    标签: polymer shadow-dom


    【解决方案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>
    

    【讨论】:

    • 更有趣的是你如何使用
    • 那是因为 Polymer 的全部意义在于它是为模块化而设计的......在不触及每个模块的源代码的情况下混合和匹配来自不同文档的片段非常棒!
    • 托尼,我明白了。问题是我的外部 html 文档已经有数百行了。是我们使用导入的 SASS。这里我们有一个很大的外部 html 文件,其中包含
    • 我对 SASS 并不熟悉,但是 Polymer 在经过一整年的“测试版”之后才刚刚毕业到稳定版本......另外,据我所知,这是一个仍在开发中的功能.至于拥有一个巨大的样式表,我不确定我是否明白...您可以将您的 CSS 拆分为 1000 个文件,只要您声明您的 &lt;style&gt; 标签它具有属性/值 is="custom-style" 这样聚合物就会将它用于影子 DOM...
    猜你喜欢
    • 1970-01-01
    • 2016-11-13
    • 2014-10-11
    • 2015-03-18
    • 2019-02-21
    • 1970-01-01
    • 2018-08-27
    • 2019-07-21
    • 2014-02-08
    相关资源
    最近更新 更多