Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Shadow DOM Example</title>
<style>
.card {
padding: 20px;
margin: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="shadow-host" class="card">
<span>This is the light DOM content</span>
</div>

<script>
const host = document.getElementById('shadow-host');
const shadowRoot = host.attachShadow({ mode: 'open' });

shadowRoot.innerHTML = `
<style>
.shadow-card {
padding: 20px;
margin: 10px;
border: 1px solid blue;
color: blue;
}
</style>
<div class="shadow-card">This is inside the Shadow DOM</div>
`;
</script>
</body>
</html>