Building Components

Custom elements give developers the ability to extend HTML and create their
own tags. Because custom elements are standards based they benefit from the
Web's built-in component model. The result is more modular code that can be
reused in many different contexts.

Shadow DOM is a web standard that offers component style and markup
encapsulation. It is a critically important piece of the Web Components
story as it ensures that a component will work in any environment
even if other CSS or JavaScript is at play on the page.

Because custom elements and shadow DOM are low-level primitives, it's not
always clear how best to combine them to create a component that is robust
and works well in many different environments. While you really can do just
about anything with these APIs, here are a few best practices to help ensure
your components work well anywhere.

HowTo-Components are a set of elements which demonstrate Custom Element
and Shadow DOM best practices. These elements are not intended to be used
in production, but are instead presented as a teaching aide to help map
best practice suggestions to actual implementations.