Thursday, October 30, 2014

Next Web

I recently watched Eric Bidelman's talk from Google I/O 2013 on Web Components.  This talk was on the Future of the web platform. This talk reminds me of Angular methodology where you are adding custom tags to HTML.

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');

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 
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


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)

Dom nodes can host hidden dom

hidden dom  can't be accessed by outside  javscript

Hidden document fragment

Using markup to control it

Browser vendors been holding out

Filled in markup

Shadow dom gets rendered

Style things

This time add styling make it red


Host element provide default styles

Custom elements (require hyphen)

Ability to define new elements

Plunkr example 

Using js html.prototype

Html imports

No comments:

Post a Comment