CODEWITHSUNDEEP
csspolymerpolymer-1.0
Remi
Remi

Reputation: 5367

Scalable setup for styling polymer elements

It seems that for styling polymer 1.0 elements there are basically two options:

  1. styling via the custom-style:

Styling can be applied to a <style is="custom-style">...</style> section. In this, you can adjust predefined styling.

  1. Styling via the dom-module element:

Another example is that you can style this element by adjusting the element in the file of the element itsel adjusting the <dom-module id="xx"><template>...</template></dom-module>.

The second method allows for more rigorous changes. However, the second method will require editing the polymer HTML file itself. If you'd run Polymer via bower includes this would mean every time there's an update to the markup file, all the changes would be overwritten.

Does someone else perhaps have experience with working on styling Polymer, and is there another way to make rigorous changes without adjusting a Polymer source file?

Upvotes: 0

Views: 41

Answers (1)

tony19
tony19

Reputation: 138276

Polymer supports CSS mixins and CSS variables that would allow an element author to expose styling points that a user could customize without modifying the original source.

The following example element defines default styles and then applies a given CSS mixin (--x-foo-body) if available:

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

The user of this element could change the element's styles for .body by using a custom-style (Note: No need for is="custom-style" inside 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>

The same idea is followed with CSS variables. This example element uses a default font-color of blue for its heading text but allows it to be overridden by a CSS variable named --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>
  ...

And the user could change the element's heading color with a custom-style (Note: No need for is="custom-style" inside 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>


<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

You could read more about theming elements in Polymer docs.

Upvotes: 2

Related Questions