@polymer/polymer/test/smoke/style-props/src/settings.html

The Polymer library makes it easy to create your own web components. Give your element some markup and properties, and then use it on a site. Polymer provides features like dynamic templates and data binding to reduce the amount of boilerplate you need to

<dom-module id="simple-layout-styles">
  <template>
    <style>
      .horizontal.layout {
        display: flex;
      }

      .flex {
        flex: 1;
      }

      .flex-2 {
        flex: 2;
      }

      .center-center {
        justify-content: center;
        align-items: center;
      }

      .wrap {
        flex-wrap: wrap;
      }
    </style>
  </template>
</dom-module>

<dom-module id="x-setting">
  <template>
    <style include="simple-layout-styles">
    :host {
      margin: 4px;
      display: block;
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;
      transform: skewX(160deg);
      -webkit-transform: skewX(160deg);
    }

    section {
      box-sizing: border-box;
      margin: 1px;
      padding: 4px 16px;
      border: 1px solid black;
      border-radius: 4px;
    }

    .setting {
      background-color: var(--setting-color, #eee);
    }

  </style>
    <section class="center-center horizontal layout setting"><slot></slot></section>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'x-setting',

    listeners: {
      click: 'clickHandler'
    },

    ready: function() {
      this.setting = this.textContent;
      const obj = {
        '--setting-color': 'var(' + this.setting + ')'
      }
      this.updateStyles(obj);
    },

    clickHandler: function() {
      this.fire('setting-change', this.setting);
    }

  });
</script>