@vaibhav_kumar
@vb86596
Enables abstraction
<my-component></my-component>
create new or extend existing HTML/custom-elements
scoped HTML and Styles aka component-level encapsulation
enables to write HTML fragments not to be rendered (used to compose custom-elements)
<!DOCTYPE html>
<html>
<body>
<template id="fancy-af-button-template">
<style></style>
<button><slot /></button>
</template>
<fancy-af-button>
<span>I'm fancy!</span>
</fancy-af-button>
</body>
</html>
customElements.define(
"fancy-af-button",
class extends HTMLElement {
constructor() {
super(); // always call super() first in the constructor.
// reading custom-element's template
const template = document.getElementById("fancy-af-button-template");
const templateContent = template.content;
// creates a shadow root
const shadow = this.attachShadow({ mode: "open" });
// attaching template to shadow-root
shadow.appendChild(templateContent.cloneNode(true));
}
}
);
Stencil is a compiler that generates Web Component, developed by
Ionic Framework Team
import { Component, Prop, h, Listen, State } from "@stencil/core";
@Component({
tag: "fancy-af-button",
styleUrl: "fancy-af-button.css"
shadow: true
})
export class FancyAFButton {
@State() clickedCount: number = 0;
@Prop() title: string;
@Listen("click", { capture: true })
handleClick() {
this.clickedCount += 1;
}
render() {
return (
<button>
<span>{this.title}</span>
<span> {this.clickedCount}</span>
</button>
);
}
}