W3C Web Component Examples

• Use the Platform: using Browser technology only, not frameworks
  • only by using the W3C standards
  • using as little frameworks as possible
• Components use the Custom Element standard, frequently in combination with the Shadow DOM and ES6 Modules
• All Web Components fit into a single self-contained JavaScript file
• Each Web Component is includable into any HTML page by a single <script> line for importing the corresponding JavaScript file
• Less use of HTML template in favor of ES6 Backtick strings or even the 2kB framework lit-html, if necessary at all

Examples without any JavaScript framework

• simple-menu: Use as entry point
• json-menu: Specify Menu structure via JSON format
• fancy-menu: Use advanced techniques

Examples with lit-html

lit-html is a 2kB framework doing most of the jobs necessary for web component templating and incremental rendering

Tutorials

• MDN Using custom elements
• Eric Bidelman, Google: Shadow DOM v1: Self-Contained Web Components

Additional Examples in other GitHub Repos

• MDN Web Component Examples