css - 如何使用外部样式设置自定义 Polymer 元素的内部元素的样式？

无法使用带有 Polymer 1.x 或 2.x 的 Shadow DOM 来设置元素样式。考虑 Polymer 2.0 中的以下自定义元素:

<link rel="import" href="../polymer/polymer.html">

<!--
`semantic-ui-button`


@demo demo/index.html
-->

<dom-module id="polymer-button">
  <template>
    <div class$="button {{size}}">{{label}}</div>
  </template>

  <script>
    class MyElement extends Polymer.Element {
      static get is() {
        return 'polymer-button';
      }
      static get properties() {
        return {
          label: {
            type: String,
            value: 'polymer-element'
          },
          size: { type: String }
        };
      }
    }

    window.customElements.define(MyElement.is, MyElement);
  </script>
</dom-module>

在演示中:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

    <title>polymer-element demo</title>

    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
    <link rel="import" href="../polymer-element.html">

    <style is="custom-style" include="demo-pages-shared-styles"></style>
    <style>
      body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
      .button {
        background: #ccc;
        border-radius: 4px;
        color: #444;
      }
      .button.big {
        font-size: 1rem;
        padding: 6px;
      }
    </style>
  </head>
  <body>
    <div class="vertical-section-container centered">
      <h3>Basic polymer-element demo</h3>
      <demo-snippet>
        <template>
          <polymer-button label="Demo"></polymer-button>
        </template>
      </demo-snippet>
    </div>
  </body>
</html>

演示中为 .button 和 .button.big 定义的样式未应用于阴影元素；然而，在 Polymer 1.x 中，如果我们使用 ShadyDOM，则会应用样式:

<link rel="import" href="../polymer/polymer.html">

<!--
`polymer-button`


@demo demo/index.html
-->

<dom-module id="polymer-button">
  <template>
    <div class$="button {{size}}">{{label}}</div>
  </template>

  <script>
    Polymer({

      is: 'polymer-button',

      properties: {
        label: { type: String }
      },

    });
  </script>
</dom-module>

有没有办法使用 external styles 选择/设置这些内部元素的样式？？

下面是我上面所说的按出现顺序的可视化表示:

使用 Shadow DOM 的 Polymer 1.x
使用 ShadyDOM 的 Polymer 1.x
polymer 2.x

最佳答案

要启用样式点，use CSS variables/mixins .

添加 <style>标记到元素的模板:

<dom-module id="polymer-button">
  <template>
    <style>
      .button {
        @apply --my-button-mixin;
      }
      .button.big {
        @apply --my-button-big-mixin;
      }
    </style>
    ...
  </template>
</dom-module>

在容器元素中指定混合:

<dom-module id="x-foo">
  <template>
    <style>
      polymer-button {
        --my-button-mixin: {
          background: red;
          color: white;
        };
      }
    </style>
    <polymer-button label="Red button"></polymer-button>
  </template>
</dom-module>

...或在index.html :

<body>
  <custom-style>
    <style>
      polymer-button {
        --my-button-mixin: {
          background: red;
          color: white;
        };
      }
    </style>
  </custom-style>
  <polymer-button label="Red button"></polymer-button>
</body>

codepen (Polymer 1)

codepen (Polymer 2)

关于css - 如何使用外部样式设置自定义 Polymer 元素的内部元素的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42756301/

css - 如何使用外部样式设置自定义 Polymer 元素的内部元素的样式？

上一篇：css - 在 javafx 中悬停并按下

下一篇：css - 位置为 : fixed? 的移动对象的转换