30:T4ba,function scoped(doms, css, options = {}) { const wrapper = options.wrapper && options.wrapper instanceof Element ? options.wrapper : html`

`; const wrapperClassPrefix = options.wrapperClassPrefix || 'scoped-dom'; const wrapperClass = options.wrapperClass || randomId(wrapperClassPrefix); wrapper.classList.add(wrapperClass); if (options.wrapperIdPrefix || options.wrapperId) { const wrapperIdPrefix = options.wrapperIdPrefix || wrapperClassPrefix; const wrapperId = options.wrapperId || randomId(wrapperIdPrefix); wrapper.setAttribute('id', wrapperId); } const style = html`

Green?

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"md`This cell is setting the color to \\`blue\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"{\n return html`

Blue

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"redCell = {\n const dom = html`

Scope your CSS

`;\n const css = `h2 {color: red;}`;\n return scoped(dom, css);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Use \\`scoped()\\` to wrap the HTML content and CSS styles.\n\nIt creates a \\`

\\` wrapper with a unique class name (\\`${\n redCell.classList\n}\\`) and appends the CSS style and the DOM inside.\n\n${toHtml(redCell)}\n\nThe CSS string is processed using [Less](https://observablehq.com/@tmcw/using-less-js-in-observable) to add the \\`.${\n redCell.classList\n}\\` prefix to all the CSS declarations. By the way, feel free to use the Less syntax in the \\`css\\` argument.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"purpleCell = {\n const dom = html`

Specify the wrapper element

`;\n const css = `* {color: purple;}`;\n const wrapper = html`

`;\n const title = scoped(dom, css, { wrapper });\n return html`

${title}

Some black text

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`Instead of letting the \\`scoped()\\` function create the wrapping DOM element, you can provide it via the options (third argument).\n\nThe DOM and the CSS style have been wrapped into the \\`header\\` wrapper.\n\n${toHtml(purpleCell)}\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"brownCell = {\n const dom = html`

Use dom as the wrapper

`;\n const css = `* {color: brown;}`;\n return scoped(dom, css, { wrapper: dom });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"md`You can even pass the \\`dom\\` object as the \\`wrapper\\` option. In that case, no wrapper is added around the DOM.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`The \\`dom\\` object now has the \\`${\n brownCell.classList\n}\\` class and the CSS \\`