Shadow DOM attaches an isolated DOM tree to an element. Styles inside do not leak out and page styles do not leak in. CSS custom properties do pierce the boundary. Use ::part() to allow external styling of parts.
Shadow DOM
class MyButton extends HTMLElement {
connectedCallback() {
const shadow = this.attachShadow({ mode: "open" });
shadow.innerHTML = `
<style>button { background: blue; color: white; }</style>
<button><slot></slot></button>
`;
}
}
customElements.define("my-button", MyButton);
// <my-button>Click me</my-button>