3 ms·
Basically, HTML Web Components are classes extending HTMLElement registered manually via JavaScript / DOM API. class superSlider extends HTMLElement { co
by sandreas 3y ago
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 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.
- toasted-subs 3y agoI don't understand why people use the shadow Dom. Why not edit the Dom directly?
- lpedrosa 3y agoYou 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.