Inheritance

The extends attribute from <component> sets the root element of Shadow Tree. You can extends from a custom element. The inheritance happens in style and template. You can start creating a new component with the same style and template from another one and customize only some parts of it. Leaving some slots can help with that.

Lets start with a simple example:

<component name="base-badge">
  <template>
    <span>
      <slot name="span-slot" /><slot/></slot>
    </span>
  </template>
  <style>
    span {
      display: inline-block;
      padding: .45em .6em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1.5;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      font-family: Roboto, "Helvetica Neue", Arial;
      padding-bottom: .2em;
      padding-right: .6em;
      padding-left: .6em;
      border-radius: 10rem;
      color: #FFF;
      background-color: #007bff;
    }
  </style>
</component>
<base-badge>your label</base-badge>

your label

Now that we defined a base badge component we can create a more specific kind of badge, a numbered badge. To do that, we are going to extend from the base-badge.

<component name="numbered-badge" extends="base-badge">
  <style>
    ::slotted(span) {
      color: #e63946;
      padding: 2px;
      background-color: #FFF;
      border-radius: 20%;
    }
  </style>
</component>
<numbered-badge>
  health: <span>98</span>
</numbered-badge>

health: 98