Stay organized with collections
Save and categorize content based on your preferences.
Components are the building blocks of modern web applications. What best practices should you follow when building your own components so they can stand the test of time?
Components are the building blocks of modern web applications. What best
practices should you follow when building your own components so they can stand
the test of time?
Custom Elements
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.
Learn more
Shadow DOM
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.
Learn more
Best Practices
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.
Learn more
Examples
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.
Learn more
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2017-08-14 UTC."],[],[]]