Skip to content

Instantly share code, notes, and snippets.

@nickautomatic
Last active January 9, 2023 16:53
Show Gist options
  • Save nickautomatic/0cb6f5a366faa5e2d4427482c43f7db6 to your computer and use it in GitHub Desktop.
Save nickautomatic/0cb6f5a366faa5e2d4427482c43f7db6 to your computer and use it in GitHub Desktop.

What are Web Components?

Web Components are a new browser feature that provides a standard component model for the Web — WICG/web-components

<my-element>Hello</my-element>

A web native alternative to, eg. React and Vue.

Allow you to build encapsulated, reusable components

The underlying web standards are:

  • Custom Elements
  • Shadow DOM
  • HTML Templates (<template>)

What are the benefits?

  • Based on web standards (so a safe bet in the long run)
  • Usable directly in HTML (unlike JSX, which has to be compiled)
  • Framework agnostic (you can build components that can be used with any UI framework)
  • Can be used as a progressive enhancement
  • Lightweight and performant (can avoid the need for loading a framework)
  • Multiple <slot>s per component - ie. not just children

Syntax

Custom elements must have a dash in their name (eg. <my-component>)

Why? No native HTML element has (or will have) a dash in it, so this avoids the risk of name clashes with new HTML elements in future.

Is anyone actually using them?

Yes.

...etc.

Questions

What is a Custom Element?

What is an HTML template?

What is Shadow DOM?

What is Declarative Shadow DOM?

References

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment