← NotionKit

Elements proof of concept

Left: the CSS class. Right: a custom element whose shadow root adopts only componentsSheet from notionkit-styles.js. Both must look the same, re-theme together, take the page's branding, and size a slotted icon. The table below measures that instead of asserting it.

⚠️ Opened from file:// – module imports are blocked there. Serve the folder (npx http-server -c-1) and run npm run build first.

.nk-callout (class, light DOM)

💡

Core idea: a callout carries one thought that must not be missed.

In progress Done Planned

<nk-callout> (element, shadow DOM)

💡Core idea: a callout carries one thought that must not be missed.

In progress Done Planned

Measured

How it works

The element adopts componentsSheet only. Tokens go on the document once, wrapped in @layer notionkit-defaults, so the page's own notionkit.css and any brand stylesheet win over them. Inside the shadow root the tokens are simply inherited. A display:contents wrapper mirrors data-theme from <html>, driven by one MutationObserver for all instances.

The slotted icon is styled by the ::slotted([slot="icon"]) twin of the .c-icon rule in notionkit.css. Without that twin it would measure 0×0 – the bug GlassKit 1.10 fixed.

html<script type="module" src="nk-callout.js"></script> <nk-callout icon="💡">Text</nk-callout> <nk-callout><span slot="icon">📌</span>Text</nk-callout> <nk-tag color="green">Done</nk-tag>