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
0.4.2
0.5.0
0.5.1
0.5.1-1
0.5.2
0.5.3
0.5.3-rc
0.5.3-rc2
0.5.4
0.5.5
0.5.5-rc1
0.6.0
0.6.1
0.6.2
0.6.3
0.7.0
0.7.1
0.7.10
0.7.11
0.7.12
0.7.13
0.7.14
0.7.15
0.7.16
0.7.17
0.7.18
0.7.19
0.7.2
0.7.20
0.7.21
0.7.22
0.7.23
0.7.24
0.7.3
0.7.4
0.7.5
0.7.6
0.7.7
0.7.8
0.7.9
1.0.0
1.0.0-rc.1
1.0.0-rc.10
1.0.0-rc.11
1.0.0-rc.12
1.0.0-rc.2
1.0.0-rc.3
1.0.0-rc.4
1.0.0-rc.5
1.0.0-rc.6
1.0.0-rc.7
1.0.0-rc.8
1.0.0-rc.9
1.0.1
1.0.10
1.0.11
1.0.12
1.0.13
1.0.14
1.0.15
1.0.16
1.0.17
1.0.18
1.0.19
1.0.2
1.0.20
1.0.21
1.0.22
1.0.3
1.0.4
1.0.5
1.0.6
1.0.7
1.0.8
1.0.9
1.1.0
1.1.1
1.2.0
1.2.1
1.2.2
1.2.3
1.2.4
1.2.5
1.2.6
1.2.7
1.3.0
1.3.1
1.3.2
1.3.3
2.0.0
2.0.0-0
2.0.0-beta.2
2.0.0-beta.3
2.0.1
2.0.2
2.0.3
2.0.4
2.1.0
2.1.1
2.1.2
2.1.3
2.2.0
2.2.1
2.2.10
2.2.2
2.2.3
2.2.4
2.2.5
2.2.6
2.2.7
2.2.8
2.2.9
2.3.0
2.4.0
2.4.1
2.4.2
2.4.3
2.4.4
2.5.0
2.6.0
2.7.0
*** 2.8.0