[HTML5] Avoiding CSS Conflicts via Shadow DOM CSS encapsulation

Shadow DOM is part of the web components specification. It allows us to ship self contained components along with their style and isolate the component from global style while "protecting" the host application from styles defined inside the component. In this lesson you will learn how to setup a shadow DOM and see the CSS encapsulation in action.

 

<!-- Global Style-->
<style>
    div.text {
        color: red;
        text-decoration: underline;
        font-size: 36px;
    }
</style>

<!-- Custom element template -->
<template>
<!-- Shadow dom style for custom element-->
    <style>
        .text {
            color: blue;
            text-decoration: overline;
            font-size: 28px;
        }

    </style>
    <div class="text">
        <slot name="content">Default text</slot>
    </div>
</template>
<script>
    const template = document.querySelector('template');
    class CustomElement extends HTMLElement {
        constructor() {
            super();
            this.attachShadow({mode: "open"});
            this.shadowRoot.appendChild(template.content.cloneNode(true))
        }

    }
    window.customElements.define('custom-element', CustomElement);
</script>
<custom-element>
    <p slot="content">In the Shadow</p>
</custom-element>
<div class="text">Outside the shadow</div>