用于定型聚合物元件的可扩展设置-Java 学习之路

看来，对于造型聚合物1.0元素，基本上有两种选择：

样式通过 custom-style ：

样式可以应用于 <style is="custom-style">...</style> 部分 . 在此，您可以调整预定义样式 .

通过 dom-module 元素进行样式设置：

另一个例子是你可以通过调整元素文件中调整 <dom-module id="xx"><template>...</template></dom-module> 的元素来设置这个元素的样式 .

第二种方法允许更严格的更改 . 但是，第二种方法需要编辑聚合物HTML文件本身 . 如果您通过bower include运行Polymer，这意味着每次对标记文件进行更新时，所有更改都将被覆盖 .

是否有其他人可能有使用Polymer样式的经验，还有另一种方法可以在不调整Polymer源文件的情况下进行严格的更改吗？

1 回答

Polymer支持CSS mixins和CSS variables，它允许元素作者公开用户可以自定义的样式点，而无需修改原始源 .

以下示例元素定义默认样式，然后应用给定的CSS mixin（ --x-foo-body ）（如果可用）：

<dom-module id="x-foo">
  <template>
    <style>
      .body {
        padding: 1em;
        font-size: 0.9em;
        @apply --x-foo-body;
      }
    </style>
    <p class="body">Lorem ipsum...</p>
  </template>
  ...

此元素的用户可以使用 custom-style 更改 .body 的元素样式（注意： dom-module 内不需要 is="custom-style" ）：

// index.html
<style is="custom-style">
  x-foo.my-styles {
    --x-foo-body: {
      padding: 0;
      color: red;
    };
  }
</style>

<x-foo class="my-styles"></x-foo>

CSS变量遵循相同的想法 . 此示例元素使用 blue 的默认值作为其 Headers 文本，但允许它被名为 --x-foo-heading-color 的CSS变量覆盖 .

<dom-module id="x-foo">
  <template>
    <style>
      .heading {
        color: var(--x-foo-heading-color, blue);
      }
    </style>
    <h2 class=".heading">Hello world</h2>
    <p>Lorem ipsum...</p>
  </template>
  ...

并且用户可以使用 custom-style 更改元素的 Headers 颜色（注意： is="custom-style" 内部不需要 is="custom-style" ）：

// index.html
<style is="custom-style">
  x-foo.my-heading-style {
    --x-foo-heading-color: green;
  }
</style>

<x-foo class="my-heading-style"></x-foo>

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  
  <dom-module id="x-foo">
    <template>
      <style>
        .heading {
          font-family: sans-serif;
          color: var(--x-foo-heading-color, gray);
        }
        .body {
          padding: 1em;
          font-size: 0.9em;
          @apply --x-foo-body;
        }
      </style>
      <h2 class="heading">[[heading]]</h2>
      <p class="body">Lorem ipsum...</p>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({ is: 'x-foo' });
      });
    </script>
  </dom-module>

</head>
<body>
  <style is="custom-style">
    .x-heading {
      --x-foo-heading-color: green;
    }
    .x-body {
      --x-foo-body: {
        padding: 0.5em;
        font-family: Courier New;
        background-color: lightgray;
      };
    }
  </style>

  <x-foo heading="Default style"></x-foo>
  <x-foo heading="Custom heading color" class="x-heading"></x-foo>
  <x-foo heading="Custom heading color and body styles" class="x-heading x-body"></x-foo>
</body>

codepen

您可以在Polymer docs中阅读有关主题元素的更多信息 .

回复于 2024-05-10T06:49:24+08:00

用于定型聚合物元件的可扩展设置

1 回答

相关问题