Question

首先，对于有关此主题的另一篇文章感到抱歉，但我在聚合物文档和堆栈溢出中看不出任何对我有意义的内容。

我只想将风格附加到我的元素上。

从文档（https://www.polymer-project.org/0.5/articles/styling-elements.html和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

ssorallen很好地解释了css问题，还有更多。我无法让:host使用它自己，并且根据您需要的浏览器来填充Shadow DOM＆amp;添加polyfill-next-selector个样式。

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

我还想弄清楚的一件事是嵌套<template>问题。我无法通过::shadow或/deep/刺穿阴影边界。可能是一个bug。我会在几分钟后看看。

Answer 2

从内部设置元素样式时使用: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按钮，而不是元素本身。这也意味着您不需要为选择器添加标签名称作为范围; shadow DOM提供范围。

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

2 个答案: