Web Components create custom HTML elements using customElements.define(). Shadow DOM provides style isolation. HTML Templates define reusable structure. Together they create encapsulated components without a framework.
Custom HTML Elements
class UserCard extends HTMLElement {
connectedCallback() {
const name = this.getAttribute("name");
this.innerHTML = `
<div class="user-card">
<h3>${name}</h3>
</div>
`;
}
}
customElements.define("user-card", UserCard);
// Usage in HTML:
// <user-card name="Alice"></user-card>