Question

我正在尝试并且无法创建一个简单的Web组件，仅用于样式范围目的。

我的想法是我会定义一个组件 - 比如<scoped-style> - @import是一个样式表，这样<scoped-style>的任何实例都会为我确定导入的样式表的范围。我只想在元素中分离样式而不使用。

到目前为止，我甚至无法使用Polymer创建一个组件，该组件将基于<style>的样式应用于任何实例可能包含的任意内容。 <content></content>中的内容似乎只能使用

进行样式设置

:host ::content [selector] {
  /* shadowy styles */
}

这极其有限，也破坏了我的@import计划。

到目前为止，这是组件定义：

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="scoped-style">
    <style>
        p {
            background: red;
        }
    </style>
    <template>
        <div>
            <p>Paragraph outside content (below) which _does_ go red</p>
            <content></content>
        </div>
    </template>
    <script>
        Polymer({
            is: "scoped-style"
        });
    </script>
</dom-module>

这是我想要的用法：

<scoped-style>
  <p>This paragraph should _also_ go red, but doesn't.</p>
</scoped-style>

非常感谢！

Answer 1

不，那是对的。在Guide to Styling Elements注意到：

分布式[element - <p>，在你的情况下]仍然是[黑色]，因为它在逻辑上仍然在父页面中，因此匹配scoped-style > p。它只是在其他地方渲染（在Shadow DOM土地上）。

如何使用Polymer / Web Components为任意内容创建样式范围

1 个答案: