Skip to content
About Blog Learn Explore Patterns Case studies
On this page
  • Custom Elements
  • Shadow DOM
  • Best Practices
  • Examples
  • Home
  • All articles

Building components

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?

Aug 14, 2017 — Updated Sep 20, 2018
On this page
  • Custom Elements
  • Shadow DOM
  • Best Practices
  • Examples

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?

Code icon.

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

Boder style icon

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

Done icon.

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

Explore icon.

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

Last updated: Sep 20, 2018 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.