聚合物元素定义的样式不起作用

Question

首先，对于关于此主题的另一个 post，我深表歉意，但我在 Polymer 文档和 Whosebug 上看不到任何对我有意义的内容。

我只想将样式附加到我的元素。

来自文档（https://www.polymer-project.org/0.5/articles/styling-elements.html and https://www.polymer-project.org/0.5/docs/polymer/styling.html#including-stylesheets-in-an-element)it 应该是直截了当的。

 <polymer-element name="x-foo">
 <template>
 <style>
   x-foo div { ... }
 </style>
 ...

但它没有按预期工作。如果我们在元素内部定义元素的样式，则不会应用它。

代码如下：

  <polymer-element name="x-button" noscript>
    <template>

      <style>
        /* not working */
        x-button {
          background-color: green;
        }

        /* not working */
        x-button .hithere{
          display: block;
          min-height: 50px;
          background-color: red;
          margin: 20px;
        }

        /* not working */
        x-button .hitheretoo{
          display: block;
          min-height: 50px;
          background-color: blue;
          margin: 20px;
        }
      </style>


      <div class="hithere"></div>

      <template>
        <div class="hitheretoo"></div>
      </template>


    </template>

  </polymer-element>

还有现场演示： http://codepen.io/anon/pen/yyZqMN

谢谢

Answer 1

从内部设置元素样式时使用 :host selector

<style>
  :host {
    background-color: green;
  }

  .hithere {
    display: block;
    min-height: 50px;
    background-color: red;
    margin: 20px;
  }

  .hitheretoo {
    display: block;
    min-height: 50px;
    background-color: blue;
    margin: 20px;
  }
</style>

当您从自定义元素内部设置样式时，所有选择器的范围都已限定在该元素内。通过选择 x-button，您选择的是作为此元素的后代的任何 x 按钮，而不是元素本身。这也意味着您不需要在选择器前面加上标签名称来确定它们的范围；阴影 DOM 提供范围。

Answer 2

ssorallen 很好地解释了 css 问题，还有更多。我无法让 :host 自行工作，并且根据浏览器的不同，您需要调整 Shadow DOM 并添加 polyfill-next-selector 样式。

此外，该元素永远不会被注册，因为您没有在自定义元素中使用 Polymer() 函数（除非您选择不在您的代码示例中添加它）。这是我发现 one possible solution.

的代码笔

我仍在努力弄清楚的一件事是嵌套 <template> 问题。我无法用 ::shadow 或 /deep/ 穿透阴影边界。可能是一个错误。我过几分钟再看看。

聚合物元素定义的样式不起作用

Polymer element-defined styles not working

css

web-component

polymer