|
|
|
|
|
|
by andrewstuart
672 days ago
|
|
|
Just out of interest I wanted to see something a little bit similar in Web Components: <html lang="en">
<body>
<h1>Web Components Examples</h1>
<h2>Counter Component</h2>
<counter-component></counter-component>
<h2>Clickable Button Component</h2>
<clickable-button></clickable-button>
<h2>Toggler Component</h2>
<toggler-component></toggler-component>
<script>
class CounterComponent extends HTMLElement {
constructor() {
super();
this.count = 0;
this.button = document.createElement('button');
this.button.textContent = this.count;
this.button.addEventListener('click', () => {
this.count++;
this.button.textContent = this.count;
});
this.attachShadow({ mode: 'open' }).appendChild(this.button);
}
}
class ClickableButton extends HTMLElement {
constructor() {
super();
this.clicked = false;
this.button = document.createElement('button');
this.button.textContent = "Click me!";
this.button.addEventListener('click', () => {
this.clicked = !this.clicked;
this.button.textContent = this.clicked ? "Clicked!" : "Click me!";
});
this.attachShadow({ mode: 'open' }).appendChild(this.button);
}
}
class TogglerComponent extends HTMLElement {
constructor() {
super();
this.on = false;
this.button = document.createElement('button');
this.button.textContent = "OFF";
this.button.addEventListener('click', () => {
this.on = !this.on;
this.button.textContent = this.on ? "ON" : "OFF";
});
this.attachShadow({ mode: 'open' }).appendChild(this.button);
}
}
customElements.define('counter-component', CounterComponent);
customElements.define('clickable-button', ClickableButton);
customElements.define('toggler-component', TogglerComponent);
</script>
</body>
</html>
|
|
|