Changes between Initial Version and Version 1 of WebComponents2016


Ignore:
Timestamp:
Oct 26, 2016 1:17:41 PM (7 years ago)
Author:
Jon Davis
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • WebComponents2016

    v1 v1  
     1= Web Components =
     2
     3Web components are a feature to modularize the web.
     4
     5Four features:
     6Html templates (done)
     7Shadow DOM (bug fixing)
     8Custom Elements (wip)
     9Html Imports (waiting on modules)
     10
     11Html templates are a way to fix parser.
     12One problem with HTML parser there is not valid html for every possible DOM tree.
     13
     14
     15Shadow DOM:
     16Represents a parallel tree.
     17
     18One problem is that in DOM for example Styles can apply to things that they were not intended to apply to.
     19In the shadow DOM, there is a boundary between styles in the old DOM and shadow DOM.
     20
     21Slotting:
     22For a DIV there is a ShadowRoot that can have SLOTs. SLOT can say to set a property.
     23
     24There are three types of Shadow DOM in WebKit:
     25UserAgent, Closed, Open.
     26
     27In WebKit there are three names for the rendered tree:
     28Composed tree == flat tree == rendered tree
     29
     30There are also two ways to iterate:
     31Within a given tree -> parentNode
     32Across shadow trees
     33Don’t use the
     34
     35Custom Elements:
     36Allows users to give custom names to elements.
     37
     38Custom Elements are allowed to add various callbacks that are called when things happen in the Shadow tree.
     39
     40Callbacks are almost Synchronous:
     41They are not quite synchronous since it calls from C++ to JS.
     42
     43When callbacks are set to be called we create a stack of every thing that needs to happen. Then when returning back to JS everything in the stack is executed. Those callbacks may, themselves, call back into Bindings that create their own set of callbacks. It’s important to remember that the tree may not look the expected way after the callback.
     44
     45This stack exists for each element.
     46
     47It’s possible to asynchronously create custom elements.
     48Elements have four states.
     491: A builtin element.
     502: waiting to be upgraded (when createElement is called but the js for a custom element has not been loaded yet)
     513:
     52
     53?: Are their possibilities to infinite loop
     54A: yeah.
     55
     56One of the biggest challenges is to ensure that custom elements are not modified outside of the functions marked as allowed to modify the shadow element.
     57
     58The timing of the callbacks was partly designed so that we could avoid security bugs with C++ methods not being robust to the DOM changing under them.
     59
     60?: Is there any ordering of the callbacks
     61A: It’s in tree order.
     62
     63?: In JS can you know if an element is waiting for upgrade
     64A: Yes. There is a whenDefined method.
     65
     66?: Where are the other browsers on this.
     67A: Chrome is done, Firefox is ~6m, Edge… who knows.
     68
     69?: How do we test this.
     70A: Mostly it’s browser specific but maybe we should have a W3C test suite for these things.