Public
Edited
Mar 1, 2023
1 star
shtml = (...args) => {
// call `html` so this has the same output.
const dom = html.apply(undefined, args);
// create a wrapper with a shadow dom and put the
// output in that shadow dom.
const div = document.createElement("div");
const shadow = div.attachShadow({ mode: "open" });
shadow.appendChild(dom);
// return the wrapper.
return div;
}
p = shtml`
<style>
p { font-weight: bold; color: red; }
</style>
<p>
This paragraph element has custom, scoped style.
</p>
`
p.shadowRoot.querySelector("p").textContent
html`<p>This paragraph element does not have the custom style.</p>`
styleWrap = (css, elem) => {
const style = document.createElement('style');
style.innerText = css;
// create a wrapper with a shadow dom and put the
// output in that shadow dom.
const div = document.createElement("div");
const shadow = div.attachShadow({ mode: "closed" });
shadow.appendChild(style);
shadow.appendChild(elem);
// return the wrapper.
return div;
}
styleWrap(
`
a {
color: purple;
}
`,
md`This is markdown with [a styled link](https://macwright.com/)`
)
md`But outside of that markdown, [it is not styled](https://macwright.com).`
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.
