Shadow dom & Virtual dom

Shadow DOM&

Virtual DOM

@scott_sword

What is the DOM?

The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured

representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can

change the document structure, style and content. The DOM provides a representation of the document as a structured group of

nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event

is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.

The DOM is what the browser actuallyrenders with the provided assets.

1) A tree of nodes that the browser renders with your assets.

1) A tree of nodes that the browser renders with your assets.

1) An API for you to interact w/ via JS.

What is the Shadow DOM?

Angular 1.x Solution

Shadow DOM Solution

Why should you care?

So what about Virtual DOM?

Virtual DOM + render();

Dirty Checking + $scope.$digest();

≈

● Transclusion has limitations● Shadow DOM solves those problems and adds

encapsulation● Virtual DOM has nothing to do w/ Shadow

DOM & is for rapid data rendering

@scott_sword

scottsword

Demos

Standard http://jsbin.com/xijirileho/2/edit?html,output

Angular 1.x Solutionhttp://jsbin.com/yacixikubi/2/edit?html,js,output

Shadow DOM Solutionhttp://jsbin.com/cemasobefi/1/edit?html,output

Angular 2 Solutionhttps://github.com/boise-angularjs/quickstart

Presentation Slideshttp://www.slideshare.net/ScottSword/shadow-dom-virtual-dom