News for hackers. Stuff that matters.
Re:HTML Web Components by sandreas on Monday November 13, 2023 @02:53PM (#38254486)
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.

Re:HTML Web Components by toasted-subs on Monday November 13, 2023 @03:37PM (#38255050)
I don't understand why people use the shadow Dom. Why not edit the Dom directly?
Re:HTML Web Components by lpedrosa on Monday November 13, 2023 @04:40PM (#38255760)
You are correct. You don't have to use the shadow DOM, when you create a new Custom Element.

The shadow DOM provides two things:

- style encapsulation (as well as `id` attributes) - ability to use `<slot>` for templating

You should use it if you require one of the above or both.