native-components.html

<meta charset=utf-8>

<script src=https://gitcdn.xyz/repo/webcomponents/custom-elements/master/custom-elements.min.js></script>

<x-hello name=Native></x-hello>
<x-world name=Component color=red></x-world>

<script>
  class XHello extends HTMLElement {
    constructor(tagName) {
      super()
      const container = document.createElement(tagName || 'h1')
      container.textContent = this.getAttribute('name')
      this.appendChild(container)
    }
  }
  window.customElements.define('x-hello', XHello);


  class XWorld extends XHello {
    constructor() {
      super('h2')
      const style = document.createElement('style')
      style.innerHTML = `h2 {color: ${this.getAttribute('color')}}`
      this.appendChild(style)
    }
  }
  window.customElements.define('x-world', XWorld);
</script>