Public
Edited
Sep 29, 2024
<details name=fruits>
<summary>apple</summary>
it's green
</details>
<details name=fruits>
<summary>banana</summary>
this one's yellow
</details>
<details name=fruits>
<summary>strawberry</summary>
something red
</details>
<details>
<summary>tomato</summary>
does it count as a fruit?
</details>
fancyButton = {
const style = new CSSStyleSheet();
style.replaceSync(`
:host {
font-size: var(--font-size-3);
font-style: italic;
border: dashed;
}
`);
class FancyButton extends HTMLButtonElement {
static define(tag = "fancy-button") {
const current = customElements.get(tag);
if (current) {
Object.assign(current.prototype, this.prototype);
} else {
customElements.define(tag, this, { extends: "button" });
}
}
connectedCallback() {
const shadowRoot = this.attachShadow({ mode: "open" });
// Add the shared styles
shadowRoot.adoptedStyleSheets = [style];
// shadowRoot
this.replaceChildren(
"fancy " //document.createElement("slot")
);
}
}
FancyButton.define();
return { style, FancyButton };
}
<button is="fancy-button">click me</button>
import { devtools } from "@natpbs/roll"
devtools
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
