Skip to content

Instantly share code, notes, and snippets.

@iankit3

iankit3/index.html

Created March 13, 2019 10:13
Show Gist options
  • Save iankit3/d6ec25052f7fa2b2db820f9df0e044f2 to your computer and use it in GitHub Desktop.
Save iankit3/d6ec25052f7fa2b2db820f9df0e044f2 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin WebComponents Example // source https://jsbin.com/royufaquka
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="WebComponents Example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<my-component></my-component>
<script id="jsbin-javascript">
class MyComponent extends HTMLElement{
constructor(){
super();
this.classList.add("my-component");
this.addEventListener("click", (ev) => {
this.style.color = this.style.color == "red" ? "#000" : "red";
});
var shadow = this.attachShadow({mode: 'open'});
var div = document.createElement('div');
var text = document.createTextNode("A simple web component");
div.appendChild(text);
var style = document.createElement('style');
style.innerHTML = `:host{display: block;background : #ddd}`;
shadow.appendChild(style);
shadow.appendChild(div);
}
}
customElements.define('my-component', MyComponent);
</script>
<script id="jsbin-source-javascript" type="text/javascript">class MyComponent extends HTMLElement{
constructor(){
super();
this.classList.add("my-component");
this.addEventListener("click", (ev) => {
this.style.color = this.style.color == "red" ? "#000" : "red";
});
var shadow = this.attachShadow({mode: 'open'});
var div = document.createElement('div');
var text = document.createTextNode("A simple web component");
div.appendChild(text);
var style = document.createElement('style');
style.innerHTML = `:host{display: block;background : #ddd}`;
shadow.appendChild(style);
shadow.appendChild(div);
}
}
customElements.define('my-component', MyComponent);
</script></body>
</html>
Raw
jsbin.royufaquka.js
class MyComponent extends HTMLElement{
constructor(){
super();
this.classList.add("my-component");
this.addEventListener("click", (ev) => {
this.style.color = this.style.color == "red" ? "#000" : "red";
});
var shadow = this.attachShadow({mode: 'open'});
var div = document.createElement('div');
var text = document.createTextNode("A simple web component");
div.appendChild(text);
var style = document.createElement('style');
style.innerHTML = `:host{display: block;background : #ddd}`;
shadow.appendChild(style);
shadow.appendChild(div);
}
}
customElements.define('my-component', MyComponent);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment