Question

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

通过自定义风格：

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

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

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

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

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

Answer 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>
  ...

此元素的用户可以使用.body更改custom-style的元素样式（注意：is="custom-style" dom-module内// 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> } 的）：

font-color

CSS变量遵循相同的想法。此示例元素为其标题文本使用blue的默认--x-foo-heading-color，但允许它被名为<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> ...的CSS变量覆盖。

custom-style

用户可以使用is="custom-style"更改元素的标题颜色（注意：dom-module 中不需要// 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>）：< / p>

<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>

＆＃13;

{% capture string %}{name:"Supplier Name One",address:"Supplier Address One"},{name:"Supplier Name Two",address:"Supplier Address Two"}{% endcapture %}

{% assign jsplit = string | replace: '},{', '@@' %}
{% assign jsplit = jsplit | replace: '{' %}
{% assign jsplit = jsplit | replace: '}' %}
{% assign jsplit = jsplit | split: '@@' %}

{% for json in jsplit %}
  {% assign splitByComma = json | split: ',' %}
  {% for comma in splitByComma %}
    {% assign splitByDots = comma | split: ':' %}
    <p>{{ splitByDots[1] }}</p>
  {% endfor %}
{% endfor %}

＆＃13;

codepen

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

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

1 个答案: