liveBook · Manning

Open mode

As explained in Web Components in Action

Open mode is a Shadow DOM attachment setting that exposes the attached shadow root through the host's shadowRoot property.

Open mode is a Shadow DOM attachment setting that exposes a component’s shadow root through its shadowRoot property. The shadow root remains a separate DOM tree, but code with access to the host can cross the boundary deliberately. section 8.2

Attach an open shadow root

Inside connectedCallback(), call this.attachShadow({mode: 'open'}), then use this.shadowRoot to populate the component. For example, setting this.shadowRoot.innerHTML creates an internal div. Outside code cannot find that div with a document-level query, but it can reach it through the host: document.querySelector('sample-component').shadowRoot.querySelector('.inside-component'). section 8.2

Use open mode when controlled inspection or access is more useful than a strict boundary:

  • It blocks ordinary document-level selectors from reaching component internals, reducing accidental intrusions. section 8.2
  • It preserves an escape route through the host’s shadowRoot property when debugging, integrating, or making a deliberate change. section 8.4 section 8.2
  • The mode must be supplied explicitly; browser vendors did not choose a default between open and closed. section 8.2

How Web Components in Action covers it

How deep it goes
Explains attachment, separate DOM structure, selector boundaries, and host traversal, but stops short of deeper implementation internals.
Examples
Demonstrates a custom component, internal markup, document-level query failure, host-based traversal, and browser developer-tools inspection.
What it assumes
Assumes familiarity with HTML, DOM queries, custom elements, and connectedCallback while reinforcing document fragments and encapsulation.
What you can do after
Apply it via attachShadow and shadowRoot to build inspectable component internals and deliberately reach them through the host.
How it connects
Connects Shadow DOM with encapsulation, shadow roots, custom elements, document fragments, and closed mode.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.