attachShadow() method in react-scan source code.

In this article, we will review the below code snippet from react-scan source code. const initRootContainer = (): RootContainer => { if (rootContainer && shadowRoot) { return { rootContainer, shadowRoot }; } rootContainer = document.createElement('div'); rootContainer.id = 'react-scan-root'; // Notice the attachShadow here? shadowRoot = rootContainer.attachShadow({ mode: 'open' }); const cssStyles = document.createElement('style'); cssStyles.textContent = styles; What’s so interesting about this code snippet? well, it is the attachShadow method used. attachShadow The Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot. I have seen ShadowDOM usage in Next.js source code. It looks like you can’t attach shadowDOM to every type of element. Read more about elements you can attach shadowDOM to. Coming back to the code snippet in consideration above: attachShadow({ mode: 'open' }) There is a parameter here, mode. MDN documentation tells us that mode is a string specifying the encapsulation mode for the shadow DOM tree. This can be one of: open Elements of the shadow root are accessible from JavaScript outside the root, for example using Element.shadowRoot: element.attachShadow({ mode: "open" }); element.shadowRoot; // Returns a ShadowRoot obj closed Denies access to the node(s) of a closed shadow root from JavaScript outside it: element.attachShadow({ mode: "closed" }); element.shadowRoot; // Returns null Read more about the parameters you can pass into attachShadow method. About me: Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos. I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com My Github — https://github.com/ramu-narasinga My website — https://ramunarasinga.com My Youtube channel — https://www.youtube.com/@thinkthroo Learning platform — https://thinkthroo.com Codebase Architecture — https://app.thinkthroo.com/architecture Best practices — https://app.thinkthroo.com/best-practices Production-grade projects — https://app.thinkthroo.com/production-grade-projects References: https://github.com/aidenybai/react-scan/blob/main/packages/scan/src/core/index.ts#L49 https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow https://dev.to/ramunarasinga/tips-from-open-source-use-shadow-dom-to-avoid-potential-css-breaks-41dd

Mar 10, 2025 - 07:49

attachShadow() method in react-scan source code.

In this article, we will review the below code snippet from react-scan source code.

const initRootContainer = (): RootContainer => {
  if (rootContainer && shadowRoot) {
    return { rootContainer, shadowRoot };
  }

  rootContainer = document.createElement('div');
  rootContainer.id = 'react-scan-root';

  // Notice the attachShadow here?
  shadowRoot = rootContainer.attachShadow({ mode: 'open' });

  const cssStyles = document.createElement('style');
  cssStyles.textContent = styles;

What’s so interesting about this code snippet? well, it is the attachShadow method used.

attachShadow

The Element.attachShadow() method attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot.

I have seen ShadowDOM usage in Next.js source code.

It looks like you can’t attach shadowDOM to every type of element. Read more about elements you can attach shadowDOM to.

Coming back to the code snippet in consideration above:

attachShadow({ mode: 'open' })

There is a parameter here, mode.

MDN documentation tells us that mode is a string specifying the encapsulation mode for the shadow DOM tree. This can be one of:

open

Elements of the shadow root are accessible from JavaScript outside the root, for example using Element.shadowRoot:

element.attachShadow({ mode: "open" });
element.shadowRoot; // Returns a ShadowRoot obj

closed

Denies access to the node(s) of a closed shadow root from JavaScript outside it:

element.attachShadow({ mode: "closed" });
element.shadowRoot; // Returns null

Read more about the parameters you can pass into attachShadow method.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@thinkthroo

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects