Vanilla HTML · Web Components
Autonomous HTML components
One template, two delivery layouts. Change the language to update the same component markup in place.
Loading components…
Same selector, separate Shadow DOM trees
Both components use the exact selector :host h1. Each stylesheet sets a different color, and each rule can reach only its own shadow tree.
This page heading is styled by a global h1 rule. It does not color either component heading.
Single HTML file
The template, scoped style, and classic script live together in one .html file.
Separate HTML, CSS, and JavaScript
The template stays in HTML. A stylesheet link inside the template is cloned into the shadow root.
Accessibility and language
- The language control is a native, labelled select and works with the keyboard.
- Changing language updates the document language and direction; Arabic switches the layout to right-to-left.
- Components keep semantic headings and buttons, and announce loading and language changes through the status region.
- One component structure is reused. Only translated strings live in the shared dictionary.