Shadow dom & Virtual dom
-
Upload
scott-sword -
Category
Software
-
view
875 -
download
0
Transcript of 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