Propagating Attributes

To facilitate styling based on attributes, tag-components propagates every attribute defined in the custom element to the root element of shadow tree.

<component name="alert-box" extends="p">
  <style>
    p {
      background-color: #eae2b7;
      color: #003049;
      padding: 10px;
    }
    p[success] {
      color: #d62828;
      font-weight: bold;
    }
  </style>
</component>
<alert-box>Normal box without attribute</alert-box>
<alert-box success>Hey! I have attribute.</alert-box>

Normal box without attribute Hey! I have attribute.

You can see the <p> element has the same attribute success defined in <alert-box>. tag-components propagates so you can easely add styles based on this attribute. The other way would be to style based on :host[success].

Defining template

Let's say you want to define your own template for your component, how attributes propagation will work?

<component name="my-alert">
  <template>
    <p super>
      <slot />
    </p>
  </template>
  <style>
    p {
      background-color: #eae2b7;
      color: #FFF;
      padding: 10px;
    }
    p[super] {
      background-color: #6B4E71;
    }
    p[success] {
      font-weight: bold;
      box-shadow: 0 0px 10px 6px #9ecaed;
    }
  </style>
</component>
<my-alert>native</my-alert>
<my-alert success>propagating attributes</my-alert>

native propagating attributes

Examining the DOM you can see the attributes passed in my-alert will propagate to the root element (in this case p). Also, since the root element already has an attribute, it will merge maintaining both.