Web features: [Shadow DOM](https://webstatus.dev/features/shadow-dom) [\](https://webstatus.dev/features/slot) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). A shadow root is an encapsulated DOM subtree attached to a host element: styles inside it do not leak out, and page styles do not leak in (except inherited properties). Templates construct the tree efficiently; slots project Light DOM content into it. ## Attaching a shadow root this.attachShadow({ mode: 'open', delegatesFocus: true }); `delegatesFocus: true` makes focusing the host move focus to the first focusable element inside the shadow tree, routes `:focus` styling to the host, and on form-associated custom elements (`static formAssociated = true`) forwards `` clicks to the inner control. Set it whenever the component wraps focusable controls. Use `mode: 'open'` in almost all cases so dev tools, page scripts, and server hydration can reach `element.shadowRoot` (see [Web Components Orientation](https://developer.chrome.com/docs/modern-web-guidance/guides/html/web-components)). ## Templates: construct the tree efficiently Define a `