23. Shadow DOM
var host = document.querySelector('#host');
var root = host.createShadowRoot();
var div = document.createElement('div');
div.textContent = 'This is Shadow DOM';
root.appendChild(div);
24. Shadow DOM
var proto =
Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var root = this.createShadowRoot();
root.textContent = 'My Custom Element';
};
27. Shadow DOM Dictionary
Local DOM = DOM created and managed by custom element
Shadow DOM = native way of implementing Light DOM
Light DOM = "Normal" DOM that is written to page ("view source")
Shady DOM = Local DOM imply in normal DOM by Polymer
41. https://github.com/webcomponents/webcomponentsjs
*Indicates the current version of the browser, ~Indicates support may be flaky. If using Custom Elements or HTML
Imports with Shadow DOM, you will get the non-flaky Mutation Observer polyfill that Shadow DOM includes.
Polyfill: webcomponents.js support