native-components2.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 Component extends HTMLElement {
    constructor(tagName) {
      super()
      this.innerHTML = this.render(tagName)
    }
  }


  class XHello extends Component {
    render(tagName='h1') {
      return `<${tagName}>${this.getAttribute('name')}</${tagName}>`
    }
  }
  window.customElements.define('x-hello', XHello)

  class XWorld extends XHello {
    render() {
      return `
        ${super.render('h2')}
        <style>
          h2 {color: ${this.getAttribute('color')}
        </style>
      `
    }
  }
  window.customElements.define('x-world', XWorld)
</script>