function shadowRoot(el) {
const shadowRoot = el.attachShadow({mode: "open"});
while (el.firstChild) shadowRoot.appendChild(el.firstChild);
return el;
}
shadowRoot(html`<div>Hello! Content with a fancy CSS.</div><style>div { background: #fefe88 }</style>`)
shadowRoot(
html`<div>Hello! Content with another fancy CSS.</div><style>div { background: brown; color: white; }</style>`
)
html`<div>This div is unaffected by the CSS inside any of the shadow roots.</div>`
shadowRoot(
html`<div class="change">This .change div will use the global stylesheet
<style>.change { font-style: italic; }</style>
</div>`
)
shadowRoot(
html`<div><!-- wrapper -->
<div class="change">This .change div will use the shadow stylesheet
<style>.change { font-style: italic; }</style>
</div>`
)
html`<style>.change { font-variant: small-caps }`
shadowRoot(html`<div><style>
:host {background: coral; width: 200px; height: 100px; border-radius: 10px}
`)
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.
