As well Peter Gasston talks about web components and CSS. Example of video player which runs on javascript, html, css. If you show hidden dom, you can see markup.
Show shadow dom in web tools under wrench:
shadow root, host, dom
shadow root:
var newroot = $(foo).createShadowRoot(), newElem = '<h2<test</h2>' ;
newroot.innerHTML = newElem ;
<div id ="foo"><h1> First</h1></div>
div tag is the shadow host, and h1 text replaces h2 with test.
widget example: <div id ="foo"><h1> First</h1></div>
want it but in different color
encapsulation - has all it needs contains within itslef, nothing gets in, nothing gets out
encapsulation in html is iframe today - issues extra network, multiplee rendering, cross orgin conflicts
better encapsulation is web components
reusable web components - shadowdom, templates, custom tags
templates - put stuff in it
<template id ="foo"><h2> First</h2></template>
<div id ="bar"><h1>text 2</h1></div>
mark up inside is inert - does nothing, does not get loaded
inside template known as content
var test = $(foo).content.cloneNode(true), bar = document.getElementById('bar');
bar.appendChild(test);
puts template inside bar div tag - template active
share templates across multiple files using import
want it but in different color
encapsulation - has all it needs contains within itslef, nothing gets in, nothing gets out
encapsulation in html is iframe today - issues extra network, multiplee rendering, cross orgin conflicts
better encapsulation is web components
reusable web components - shadowdom, templates, custom tags
templates - put stuff in it
<template id ="foo"><h2> First</h2></template>
<div id ="bar"><h1>text 2</h1></div>
mark up inside is inert - does nothing, does not get loaded
inside template known as content
var test = $(foo).content.cloneNode(true), bar = document.getElementById('bar');
bar.appendChild(test);
puts template inside bar div tag - template active
share templates across multiple files using import
4 main areas (Shadow DOM gives encapsulation, templates or chunk of markup that later you can stamp out your elements, custom tags, html imports that can be reused via CDN URLs):
HTML templates:
Template out your markup
Template out your markup
Put dom in it
Parsed not rendered - won't run until you stamp it out, same for media
Hidden from document, cant traverse into, its in its own context
Content property - document fragment , clone it, stamp it out, see whats in it
Example:
Clone it is what stamps it out (here it runs script when that happens):
New spec for html templates : chrome supports it.
Shadow dom (Secret markup in elements):
markup encapsulation, DOM encapsulation, css style boundary protection, no bleeding in, style boundaries, exposes to developers mechanics browser vendors use to create their html elements
iframe has it but bloated, hard to use (extra network requests needed, multiple rendering contexts)
iframe has it but bloated, hard to use (extra network requests needed, multiple rendering contexts)
Dom nodes can host hidden dom
hidden dom can't be accessed by outside javscript
Hidden document fragment
Using markup to control it
Filled in markup
Shadow dom gets rendered
Style things
This time add styling make it red
@host
Host element provide default styles
Custom elements (require hyphen)
Html imports
