Comment by sandreas

Basically, HTML Web Components are classes extending HTMLElement registered manually via JavaScript / DOM API.

  class superSlider extends HTMLElement {
    connectedCallback() {
      let targetEl = document.querySelector(this.getAttribute('target'));
      let unit = this.getAttribute('unit');
      let slider = this.querySelector('input[type="range"]');
    }
  }

  customElements.define("super-slider",superSlider);

For a more sophisticated example with scss, jsx/tsx and ES20.. you could take a look at https://github.com/cyco/WebFun

My personal problem with these "native" components is, that the shadow DOM is pretty restricted compared to component frameworks like React, Vue or Svelte.