- **Epistemic status:** #budding The shadow [[Document Object Model (DOM)]] [[Application Programming Interface (API)]] encapsulates a web component by attaching a separated and hidden [[Document Object Model (DOM)]]. The objective of the feature is to keep the styles, markup, structure, and logic to not clash with other pieces of code. The shadow [[Document Object Model (DOM)]] tree starts with a shadow root that, in turn, can be attached to any number of elements you want. You can make modifications to the shadow [[Document Object Model (DOM)]] similarly to the regular [[Document Object Model (DOM)]] as long as you have access to the shadow [[Document Object Model (DOM)]]. The changes made inside the shadow [[Document Object Model (DOM)]] generally don't alter the regular [[Document Object Model (DOM)]]. A few key terms you will come across defined by MDN [[#^aa37ab]]: - **Shadow host**: The regular [[Document Object Model (DOM)]] node that the shadow [[Document Object Model (DOM)]] is attached to. - **Shadow tree**: The [[Document Object Model (DOM)]] tree inside the shadow [[Document Object Model (DOM)]]. - **Shadow boundary**: the place where the shadow [[Document Object Model (DOM)]] ends, and the regular [[Document Object Model (DOM)]] begins. - **Shadow root**: The root node of the shadow tree. ## Gotchas ### Style encapsulation can be bypassed Me and [Eric Delia](https://www.ericdelia.com/#) discovered that you can alter the styling of components in the shadow [[Document Object Model (DOM)]] by using the [[Cascading Style Sheets (CSS)]] selector `:root`. The reason for the discovery was that we saw [[Cascading Style Sheets (CSS)]] variables in this selector and wondered if we can set variables on a web component with a shadow root and alter the variables. An example of this behavior can be attempted in the [pop-up info box website](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) provided by MDN. ![[Pasted image 20220610100258.png]] If you inspect ![[Pasted image 20220610093552.png]] element with the developer tools, the [[HTML (HyperText Markup Language)]] structure will look like this: ```HTML <popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."> <!-- #shadow-root (open) --> <link rel="stylesheet" href="style.css"> <span class="wrapper"> <span class="icon" tabindex="0"><img src="img/alt.png"></span> <span class="info"> Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card. </span> </span> </popup-info> ``` If we add `font-size: 2em` via the style tab on the developer tools on the form element, the pop-up text won't increase in size. ![[Pasted image 20220610100408.png]] If we then add the same [[Cascading Style Sheets (CSS)]] to the `:root` selector in `styles.css`. The popup will change. ![[Pasted image 20220610100558.png]] The behavior can be useful for setting variables for theme customization. I'm not certain if this can be considered a [[Software Bug]] in the shadow [[Document Object Model (DOM)]], since it is supposed to encapsulate styles to prevent this behavior. ### Testing becomes harder Elements that are contained in a shadow root cannot be found using [[JavaScript]] selectors like `Document.getElementById(id)` (See docs [[#^431edb]]) due to the encapsulation. When the mode of the shadow root is set to closed if you try to access the element using `element.shadowRoot` it will return null, meanwhile when set to open you can access it with that specific selector. The automated test cases would be specific to certain elements around the page and to the usage of the shadow [[Document Object Model (DOM)]] making it harder in the future to replace the components that don't utilize the shadow [[Document Object Model (DOM)]]. --- ## References - “Document.GetElementById() - Web APIs | MDN.” Accessed June 10, 2022. <https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById>. ^431edb - Revill, Leon. “Open vs. Closed Shadow DOM.” Medium, March 26, 2018. <https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af>. - “ShadowRoot.Mode - Web APIs | MDN.” Accessed June 10, 2022. <https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/mode>. - “Using Shadow DOM - Web Components | MDN.” Accessed June 8, 2022. <https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM>. ^aa37ab