Get started with webcomponentsjs CDN

BSD-3-Clause licensed

WebComponents.js: Create reusable HTML elements with JS, HTML templates, and shadow DOM.

Tags:
  • webcomponents
  • polyfill
  • shim

Stable version

Copied!

How to start using webcomponentsjs CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with webcomponentsjs CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/webcomponentsjs/2.8.0/webcomponents-loader.js"></script>
</head>
<body>
  <template id="my-component-template">
    <style>
      :host {
        display: block;
        width: 100%;
        padding: 20px;
        border: 1px solid black;
      }
    </style>
    <h1>Hello, WebComponentsJS!</h1>
  </template>

  <script>
    class MyComponent extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = document.getElementById('my-component-template').innerHTML;
      }
    }

    customElements.define('my-component', MyComponent);
  </script>

  <my-component></my-component>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions