que - what is shadow dom
ans - The Shadow DOM is a web standard that allows developers to encapsulate
the internal structure and style of a web component, ensuring that
it is isolated from the rest of the document. This encapsulation prevents
style and DOM changes in the main document from affecting the component,
and vice versa.
eg - <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow DOM Example</title>
</head>
<body>
<div id="shadow-host"></div>
<script>
const shadowHost = document.getElementById('shadow-host');
const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
shadowRoot.innerHTML = `
<style>
p {
color: blue;
}
</style>
<p>This is inside the shadow DOM.</p>
`;
</script>
</body>
</html>