class MyElement extends HTMLElement {
constructor() {
super();
}
}
// Register <my-element>
customElements.define("my-element", MyElement);
class MyElement extends HTMLElement {
constructor() { super(); }
connectedCallback() {
console.log("connected");
}
disconnectedCallback() {
console.log("disconnected");
}
}
customElements.define("my-element", MyElement);
document.createElement("my-element");
let a = document.createElement("div");
let b = document.createElement("my-element");
a.append(b);
let a = document.createElement("my-element");
document.body.append(a);
<my-element id="my_element_1"></my-element>
my_element_1.remove();
<input id="spinner" type="number" min="5">
<input id="checkbox" type="checkbox" checked>
<click-counter init="3"></click-counter>
counter.init = 3;
class ClickCounter extends HTMLElement {
constructor() { super(); }
#init = 0;
get init() { return this.#init; }
set init(v) { this.#init = v; this.setAttribute("init", v); }
static get observedAttributes() { return ["init"] }
attributeChangedCallback(name, oldValue, newValue) {
if (name === "init") this.#init = newValue;
}
}
import {html, css, LitElement} from
"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
class ClickCounter extends LitElement {
constructor() { super(); }
static properties = {
init: {type: Number},
};
}
<video src="videos/war-kitten.mp4" controls></video>
this.shadowRoot.innerHTML = `<style>
p {
margin: 0;
}
</style>`;
About content
Contact content
<sl-button size="small" pill>Small</sl-button>
<sl-button style="--size: small; --pill: 1">Small</sl-button>
<fancy-slider range='{"min": 1, "max":5}'></fancy-slider>
<fancy-slider range="[1, 5]"></fancy-slider>
<fancy-slider min="1" max="5"></fancy-slider>
<google-map-marker latitude="37.78" longitude="-122.4"></google-map-marker>
<google-chart data='[["Month", "Days"], ["Jan", 31]]'></google-chart>
<fancy-tab-panel tab="About">
Tab content
</fancy-tab-panel>
<fancy-tab>About</fancy-tab>