wiki:WebComponents2015

Version 1 (modified by achristensen@apple.com, 8 years ago) (diff)

--

demoed https://www.webkit.org/blog/4096/introducing-shadow-dom-api/ on jsfiddle.net using a ToT WebKit build
css selectors have scope now
you can have nested shadow trees
slots leave “holes” in the shadow tree that will connect to nodes in the containing DOM tree
:host doesn’t do anything if it’s not in a shadow tree

defineCustomElement uses ES6 classes like HTMLTagNames.in and HTMLElementFactory.cpp
lifecycle callbacks called when exiting from user agent code

check every idl call to see if it modifies the DOM to do this callback
should the HTML5 spec have this annotation on all specs?


Questions:
dbates: could someone using the shadow dom specify which elements should be styled using the style of the containing page?

http://tabatkins.github.io/specs/css-apply-rule/#example-ded67f3a[[BR]] use css variables

:root { —toolbar-theme: hsl(120, 70%, 95%); }
.toolbar { —background-color: var(—toolbar-theme) }

what if you want many toolbars on a page and all of them to have different colors?

outside shadow dom

#nav my-toolbar { —toolbar-theme: red; }
#sidebar my-toolbar { —toolbar-theme: blue; }

inside shadow dom

.toolbar { background-color: var(—toolbar-theme); }

what if you want to have toolbars within toolbars with different colors? not possible with currently proposed api.

html imports - scripts inside imported scripts apply as if they were in the document that imported them - confusing

interaction with es6 modules unclear
loading inline script type=module should maybe also be asynchronous

allowing inline modules - not at all - maybe load as if they were loaded asynchronously, but not proposed