Senior LevelHTML & Semantic Web
How do Shadow DOM trees provide style and DOM isolation for micro-frontends?
❓ Interview Prompt: Explain Shadow DOM encapsulation, custom element host boundaries, closed vs open shadow roots, and CSS scoping.
In micro-frontend architectures, multiple teams embed independent UI applications onto a single web page. Un-scoped CSS styles from one micro-frontend can bleed into others.
Shadow DOM Encapsulation:
Attaching a Shadow Root ('element.attachShadow({ mode: "open" })') creates an encapsulated DOM subtree. Styles declared inside the Shadow DOM do NOT leak outside, and global page CSS does NOT affect inner Shadow elements!
Code Implementation Example
html
<script>
class MicroWidget extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.innerHTML = '<style>h2 { color: red; }</style><h2>Isolated Micro-frontend</h2>';
}
}
customElements.define('micro-widget', MicroWidget);
</script>💡Encapsulating micro-frontend styles using Shadow DOM attachShadow.
🎯 Interview Key Takeaway
Use Shadow DOM trees to isolate micro-frontend component styles and DOM nodes from host application CSS leakage.
#Shadow DOM#Micro-frontends#Encapsulation#Senior
Back to all HTML & Semantic Web Questions→