31:[] 2f:{"title":"Hello, shadow DOM","cells":[{"id":0,"value":"md`# Hello, shadow DOM\n\nWhen you want to isolate a component and make sure it doesn't get affected by outside CSS or its CSS don't affect outside elements, use the [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). ([Can I use it?](https://caniuse.com/?search=attachShadow) Yes.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"function shadowRoot(el) {\n const shadowRoot = el.attachShadow({mode: \"open\"});\n while (el.firstChild) shadowRoot.appendChild(el.firstChild);\n return el;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"shadowRoot(html`

Hello! Content with a fancy CSS.

`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"shadowRoot(\n html`

Hello! Content with another fancy CSS.

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"html`

This div is unaffected by the CSS inside any of the shadow roots.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"md`----\nNote that the root element is exposed in the DOM. If it has classes that should be “shadowed”, add a wrapper. The examples below demonstrate the two cases:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"shadowRoot(\n html`

This .change div will use the global stylesheet\n \n

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"shadowRoot(\n html`

This .change div will use the shadow stylesheet\n \n

`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"html`