Shadow DOM

"Method of establishing and maintaining functional boundaries between DOM trees and how these trees interact with each other within a document, thus enabling better functional encapsulation within the DOM."

• Define a Shadow Root
• Style encapsulation

Motivation

• Third party plugins should use Shadow DOM

Example plugin: jsTag

                <js-tag></js-tag>
            

The Basics

• Light DOM - What the user of the custom element supplies
• Shadow DOM - What the creator of the custom element supplies
• Composed DOM - What the browser eventually renders