├── .hgtags ├── README.md ├── assets ├── docs │ └── spec-assist.html ├── images │ ├── angular-poster-frame.png │ ├── common.svg │ ├── composed-tree.svg │ ├── distributions.png │ ├── distributions.svg │ ├── ember-poster-frame.png │ ├── event-path-and-composed-tree.svg │ ├── event-path-node-trees.svg │ ├── event-path-tree-of-trees.svg │ ├── example-basic-carousel.png │ ├── example-basic-list-box.png │ ├── example-basic-sequence.png │ ├── example-calendar.png │ ├── functional-encapsulation-example.graffle │ ├── functional-encapsulation-example.svg │ ├── import-link-list.png │ ├── import-style-document-order.png │ ├── insertion-points.graffle │ ├── insertion-points.svg │ ├── re-distributions.svg │ ├── react-poster-frame.png │ ├── shadow-dom.graffle │ ├── shadow-rendering.graffle │ ├── shadow-rendering.svg │ ├── shadow-root-and-shadow-host.svg │ ├── shadow-stack.graffle │ ├── shadow-stack.svg │ ├── shadow-trees.graffle │ ├── shadow-trees.svg │ └── tree-of-trees.svg ├── scripts │ ├── autolink.js │ ├── bug-assist.js │ ├── prettify.js │ ├── spec-assist.js │ └── spec-assist_unittests.js └── styles │ ├── main.css │ ├── prettify.css │ ├── respec-complement.css │ └── spec.css ├── explainer ├── bug-assist.js └── index.html ├── index.html ├── proposals ├── Cross-Origin-Custom-Elements:-Concept-and-Proposal.md ├── Default-Stylesheets:-Concept-and-Proposal.md ├── Imperative-API-for-Node-Distribution-in-Shadow-DOM.md ├── Isolated-Imports-Proposal.md ├── Limiting-the-superpowers-of-the-"Shadow-DOM-piercing-cominator".md ├── Multiple-Shadow-Roots-as-"a-Shadow-Root-hosts-another-Shadow-Root".md ├── Partial-Redistributions-Analysis.md └── Proposal-for-changes-to-manage-Shadow-DOM-content-distribution.md ├── publish ├── custom │ ├── LCWD-custom-elements-20131024 │ │ ├── custom-elements-whole-world.svg │ │ ├── index.html │ │ ├── prettify.css │ │ └── spec.css │ ├── WD-custom-elements-20130514 │ │ ├── index.html │ │ ├── prettify.css │ │ └── spec.css │ └── WD-custom-elements-20141218 │ │ ├── custom-elements-whole-world.svg │ │ ├── index.html │ │ ├── prettify.css │ │ └── spec.css ├── explainer │ ├── WD-components-intro-20130606 │ │ ├── event-handler-registration.png │ │ ├── event-routing-retargeting.png │ │ ├── index.html │ │ ├── prettify.css │ │ ├── shadow-rendering.svg │ │ ├── shadow-trees.svg │ │ └── spec.css │ ├── event-handler-registration.png │ ├── event-routing-retargeting.png │ ├── index.html │ ├── prettify.css │ ├── shadow-dom-subtrees.svg │ ├── shadow-rendering.svg │ ├── shadow-stack.svg │ └── spec.css ├── imports │ ├── WD-html-imports-20130514 │ │ ├── index.html │ │ ├── prettify.css │ │ └── spec.css │ └── WD-html-imports-20140306 │ │ ├── import-link-list.png │ │ ├── index.html │ │ ├── prettify.css │ │ └── spec.css ├── shadow │ ├── WD-shadow-dom-20120522 │ │ ├── functional-encapsulation-example.svg │ │ ├── index.html │ │ ├── insertion-points.svg │ │ ├── prettify.css │ │ ├── shadow-dom-subtrees.svg │ │ ├── shadow-rendering.svg │ │ └── spec.css │ ├── WD-shadow-dom-20121016 │ │ ├── functional-encapsulation-example.svg │ │ ├── index.html │ │ ├── insertion-points.svg │ │ ├── prettify.css │ │ ├── shadow-dom-subtrees.svg │ │ ├── shadow-rendering.svg │ │ └── spec.css │ ├── WD-shadow-dom-20130514 │ │ ├── common.svg │ │ ├── functional-encapsulation-example.svg │ │ ├── index.html │ │ ├── insertion-points.svg │ │ ├── prettify.css │ │ ├── shadow-rendering.svg │ │ ├── shadow-root-and-shadow-host.svg │ │ ├── shadow-stack.svg │ │ ├── shadow-trees.svg │ │ └── spec.css │ ├── WD-shadow-dom-20140612 │ │ ├── composed-tree.svg │ │ ├── distributions.svg │ │ ├── event-path-and-composed-tree.svg │ │ ├── event-path-node-trees.svg │ │ ├── event-path-tree-of-trees.svg │ │ ├── index.html │ │ ├── re-distributions.svg │ │ ├── respec-complement.css │ │ ├── tree-of-trees.svg │ │ └── working-draft.css │ └── WD-shadow-dom-20140619 │ │ ├── composed-tree.svg │ │ ├── distributions.svg │ │ ├── event-path-and-composed-tree.svg │ │ ├── event-path-node-trees.svg │ │ ├── event-path-tree-of-trees.svg │ │ ├── index.html │ │ ├── re-distributions.svg │ │ ├── respec-complement.css │ │ ├── tree-of-trees.svg │ │ ├── working-draft.css │ │ └── working-draft.js └── template │ ├── WD-html-templates-20130214 │ ├── index.html │ ├── prettify.css │ └── spec.css │ └── WD-html-templates-20130328 │ ├── index.html │ ├── prettify.css │ └── spec.css ├── samples ├── contacts-widget.html ├── entry-helper.html ├── index.html ├── replay-extension.html ├── table-chart.html ├── timezone-map-custom-element.html ├── timezone-map-decorator.html └── widget-theming.html └── spec ├── custom ├── custom-elements-whole-world.svg └── index.html ├── imports └── index.html └── shadow ├── autolink-config.js └── index.html /.hgtags: -------------------------------------------------------------------------------- 1 | 8511d6775adc4189f7f0cf31db104b697e0726ce draft-1 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | WebApps WG -- Web Components 2 | =============== 3 | 4 | This is the repository in which W3C editor's drafts of the Web Components specs are maintained. 5 | 6 | - [Introduction to Web Components](http://w3c.github.io/webcomponents/explainer/). 7 | - [Shadow DOM](http://w3c.github.io/webcomponents/spec/shadow/). 8 | - [HTML Imports](http://w3c.github.io/webcomponents/spec/imports/). 9 | - [Custom Elements](http://w3c.github.io/webcomponents/spec/custom/). 10 | -------------------------------------------------------------------------------- /assets/docs/spec-assist.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Spec Assist 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Spec Assist

18 |

Utilities For Spec Writers

19 |
20 |
Revision history
21 |
https://dvcs.w3.org/hg/webcomponents/log/tip/assets/docs/spec-assist.html
22 |
23 | 24 |
25 |

Table of Contents

26 |
    27 |
  1. What is Spec Assist?
    2. 28 |
  2. Last Updated Date Fetcher 29 |
  3. Table of Contents Enumerator
    4. 30 |
  4. Definitions Cross-linker
    5. 31 |
  5. Tests
    6. 32 |
33 |
34 | 35 |

What is Spec Assist?

36 | 37 |

Spec Assist is a simple tool that was made specifically for easing the pain of writing Web Components specs in plain HTML. It is an assortment of independent utilities, each fixing its own bit of tediousness. All these utilities are completely client-side, require little configuration, and stay out of the way.

38 | 39 |

When you need to publish the spec, just serialize the DOM tree and save it as new file. A simple way to do this is to open DevTools in Chrome, right-click on the html element, and select "Copy as HTML".

40 | 41 |

You will still need to tweak the contents of the new file before publishing, like changing the stylesheet to Working Draft, etc.

42 | 43 |

Last Updated Date Fetcher

44 | 45 |

The Last Updated Date Fetcher appends the date on which the current spec was last updated to the end of the main title, like the PubRules require.

46 | 47 |

To start using Last Updated Date Fetcher, you need two hints in your spec markup:

48 | 49 |
    50 |
  1. An element that matches h2#editors-draft, which is where the date will be appended
    2. 51 |
  2. An hyperlink that matches a#log, which must contain the URL of the Mercurial commit log.
    3. 52 |
53 | 54 |

The utility assumes that you are loading the spec from the Mercurial repository, and will attempt to fetch the ATOM feed of the commits, grab the last one and its date. If it fails at doing any of this, the utility will use today's date.

55 | 56 |

Table of Contents Enumerator

57 | 58 |

The Table of Contents Enumerator creates sequentially-running numbers for each item in the specification's table of contents, and prefixes all corresponding titles with this number.

59 | 60 |

To activate Table of Contents Enumerator, make sure that you wrap the table of contents in a section.toc element.

61 | 62 |

If you want to skip the section from becoming numbered, give its a element a no-number class.

63 | 64 |

Definitions Cross-linker

65 | 66 |

The Definitions Cross-linker cross-links all definitions and places where they are used. When the user clicks on the definition, a pop-up menu shows all the links to exact places where the definition is used. You don't need to do anything special to make it work.

67 | 68 |

To help you troubleshoot mis-typed ids and unused defnitions, the Definitions Cross-Linker will give the definitions that have no references a red tint.

69 | 70 |

If you know that the definition is not used in your spec and are okay with it, add a no-backreference class to your definition to get rid of red tint

71 | 72 |

Tests

73 | 74 |

Eventually, there will be tests :)

75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /assets/images/angular-poster-frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/angular-poster-frame.png -------------------------------------------------------------------------------- /assets/images/common.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/distributions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/distributions.png -------------------------------------------------------------------------------- /assets/images/ember-poster-frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/ember-poster-frame.png -------------------------------------------------------------------------------- /assets/images/example-basic-carousel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/example-basic-carousel.png -------------------------------------------------------------------------------- /assets/images/example-basic-list-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/example-basic-list-box.png -------------------------------------------------------------------------------- /assets/images/example-basic-sequence.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/example-basic-sequence.png -------------------------------------------------------------------------------- /assets/images/example-calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/example-calendar.png -------------------------------------------------------------------------------- /assets/images/import-link-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/import-link-list.png -------------------------------------------------------------------------------- /assets/images/import-style-document-order.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/import-style-document-order.png -------------------------------------------------------------------------------- /assets/images/react-poster-frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/assets/images/react-poster-frame.png -------------------------------------------------------------------------------- /assets/images/shadow-rendering.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2011-12-20 21:33ZCanvas 1TreesShadow TreeNodesshadow hostshadow root childshadow root childTree as Rendered... 4 | -------------------------------------------------------------------------------- /assets/images/shadow-root-and-shadow-host.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | child element 9 | 10 | child 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | host element 34 | 35 | shadow host 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | shadow root 44 | 45 | shadow root 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /assets/images/shadow-stack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2012-05-03 21:52ZCanvas 1Layer 2Shadow DOM Subtree StackLayer 1Element Shadow TreeOldest Shadow SubtreeOlder Shadow SubtreeYounger Shadow SubtreeYoungest Shadow SubtreeShadow HostShadow Host Child Nodes- shadow insertion point- insertion point 4 | -------------------------------------------------------------------------------- /assets/scripts/autolink.js: -------------------------------------------------------------------------------- 1 | 2 | function resolveAutolink() { 3 | if (!autolinkConfig) 4 | return; 5 | var definitionMap = {}; 6 | for (var urlPrefix in autolinkConfig) { 7 | var titleToLink = autolinkConfig[urlPrefix]; 8 | for (var title in titleToLink) { 9 | if (definitionMap[title.toLowerCase()]) { 10 | console.warn(title + ' is defined twice in autolinkConfig.'); 11 | } else { 12 | definitionMap[title.toLowerCase()] = urlPrefix + titleToLink[title]; 13 | } 14 | } 15 | } 16 | Array.prototype.slice.call(document.querySelectorAll("a:not([href])")).forEach(function (e) { 17 | if (e.classList.contains("internalDFN")) 18 | return; 19 | var title = e.getAttribute("title") || e.textContent; 20 | if (!title) return; 21 | title = title.toLowerCase().replace(/^\s+/, "").replace(/\s+$/, "").split(/\s+/).join(" "); 22 | if (definitionMap[title]) { 23 | e.setAttribute("href", definitionMap[title]); 24 | e.classList.add("externalDFN"); 25 | } 26 | }); 27 | } 28 | 29 | -------------------------------------------------------------------------------- /assets/scripts/bug-assist.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Simple Bug File Assistant. 4 | Find bugs? File a bug, blocking https://www.w3.org/Bugs/Public/show_bug.cgi?id=15013. 5 | To configure, use meta tags as follows: 6 | 7 | * The content of each meta tag whose name starts with "bug." becomes a form parameter for Bugzilla new bug submission. 8 | * The name "bug.blocked" is special. If present, the assistant add a link to the dependency tree of this bug. 9 | * The name "bug.comment" is overriden if the user selects text. 10 | 11 | Sample use and configuration: 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | */ 20 | 21 | document.addEventListener('DOMContentLoaded', function() { 22 | var inputs = { comment: '' }; 23 | if (window.bugAssistConfig) { 24 | for (var name in window.bugAssistConfig) { 25 | inputs[name] = window.bugAssistConfig[name]; 26 | } 27 | } 28 | var BUGS_PREFIX = 'bug.'; 29 | [].forEach.call(document.querySelectorAll('meta'), function(meta) { 30 | if (meta.name.indexOf(BUGS_PREFIX) == 0) 31 | inputs[meta.name.substr(BUGS_PREFIX.length)] = meta.content; 32 | }); 33 | 34 | var blocked = inputs.blocked; 35 | 36 | var form = document.body.appendChild(document.createElement('form')); 37 | form.id = "bug-assist-form"; 38 | form.action = '//www.w3.org/Bugs/Public/enter_bug.cgi'; 39 | form.target = '_blank'; 40 | form.textContent = 'See a problem? Select text and '; 41 | 42 | var submit = form.appendChild(document.createElement('input')); 43 | submit.type = 'submit'; 44 | submit.accessKey = 'f'; 45 | submit.style.cssText = 'font-family:Tahoma,sans-serif;font-size:10px'; 46 | var label = 'file a bug'; 47 | if (submit.accessKeyLabel) 48 | label += ' (' + submit.accessKeyLabel + ')'; 49 | submit.value = label; 50 | 51 | Object.keys(inputs).forEach(function(name) { 52 | var input = form.appendChild(document.createElement('input')); 53 | input.type = 'hidden'; 54 | input.name = name; 55 | input.value = inputs[name]; 56 | inputs[name] = input; 57 | }); 58 | 59 | if (blocked) { 60 | form.appendChild(document.createTextNode(' or ')); 61 | var a = form.appendChild(document.createElement('a')); 62 | a.textContent = 'view bugs filed'; 63 | a.href = '//www.w3.org/Bugs/Public/showdependencytree.cgi?id=' + blocked; 64 | a.target = '_blank'; 65 | } 66 | form.appendChild(document.createTextNode('.')); 67 | 68 | form.addEventListener('submit', function() { 69 | var selectedText = window.getSelection().toString(); 70 | if (selectedText) 71 | inputs.comment.value = '"' + selectedText + '"'; 72 | }, false); 73 | 74 | }, false); 75 | -------------------------------------------------------------------------------- /assets/scripts/spec-assist.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | function TableOfContentsEnumerator() 4 | { 5 | } 6 | 7 | TableOfContentsEnumerator.prototype.initialize = function() 8 | { 9 | var top = document.querySelector('section.toc'); 10 | if (!top) 11 | return; 12 | 13 | this.prefix = []; 14 | this.enumerateList(top); 15 | } 16 | 17 | TableOfContentsEnumerator.prototype.enumerateList = function(top) 18 | { 19 | var list = top.querySelector('ol,ul'); 20 | if (!list) 21 | return; 22 | 23 | this.prefix.push(1); 24 | [].forEach.call(list.children, this.processListItem, this); 25 | this.prefix.pop(); 26 | } 27 | 28 | TableOfContentsEnumerator.prototype.processListItem = function(item) 29 | { 30 | if (!(item instanceof HTMLLIElement)) 31 | return; 32 | 33 | var indexText = this.prefix.join('.') + " "; 34 | var a = item.querySelector('a'); 35 | var href = a.getAttribute('href'); 36 | var target = href && document.querySelector(href); 37 | if (!target || a.classList.contains('no-number')) 38 | return; 39 | 40 | a.insertBefore(document.createTextNode(indexText), a.firstChild); 41 | target.insertBefore(document.createTextNode(indexText), target.firstChild); 42 | 43 | this.enumerateList(item); 44 | 45 | this.prefix[this.prefix.length - 1]++; 46 | } 47 | 48 | function LastUpdatedDateFetcher() {} 49 | 50 | LastUpdatedDateFetcher.prototype.initialize = function() 51 | { 52 | this.title = document.querySelector('h2#editors-draft'); 53 | if (!this.title) 54 | return; 55 | 56 | this.fetchLastUpdated(this.appendDate.bind(this)); 57 | } 58 | 59 | LastUpdatedDateFetcher.prototype.appendDate = function(date) 60 | { 61 | var prettyDate = this.prettyDate(date); 62 | this.title.appendChild(document.createTextNode(prettyDate)); 63 | } 64 | 65 | LastUpdatedDateFetcher.prototype.fetchLastUpdated = function(callback) 66 | { 67 | var lastUpdated = new Date(); 68 | var logAnchorNode = document.querySelector('a#log'); 69 | if (!logAnchorNode) 70 | return callback(lastUpdated); 71 | 72 | var logURL = logAnchorNode.href.replace("/log", "/atom-log"); 73 | if (!logURL) 74 | return callback(lastUpdated); 75 | 76 | var xhr = new XMLHttpRequest(); 77 | xhr.onload = function() { 78 | var doc = this.responseXML; 79 | if (!doc) 80 | return callback(lastUpdated); 81 | var updatedNode = doc.querySelector('feed>updated'); 82 | if (!updatedNode) 83 | return callback(lastUpdated); 84 | callback(new Date(updatedNode.textContent)); 85 | } 86 | xhr.onerror = function() { 87 | callback(lastUpdated); 88 | } 89 | xhr.open('GET', logURL); 90 | xhr.send(); 91 | } 92 | 93 | LastUpdatedDateFetcher.prototype.prettyDate = function(date) 94 | { 95 | return ' ' + date.getDate() + ' ' + ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][date.getMonth()] + ' ' + date.getFullYear(); 96 | } 97 | 98 | function DefinitionsCrossLinker() {} 99 | 100 | DefinitionsCrossLinker.prototype.initialize = function() 101 | { 102 | document.addEventListener('click', this.onClick.bind(this)); 103 | this.hovercard = document.createElement('b'); 104 | this.hovercard.className = 'hovercard'; 105 | [].forEach.call(document.querySelectorAll('dfn[id]'), this.createCrossLinks, this); 106 | } 107 | 108 | DefinitionsCrossLinker.prototype.onClick = function(event) 109 | { 110 | var element = event.target; 111 | if (element.tagName != 'DFN' || element.contains(this.hovercard)) { 112 | this.closeHovercard(); 113 | return; 114 | } 115 | 116 | this.openHovercard(element); 117 | } 118 | 119 | DefinitionsCrossLinker.prototype.openHovercard = function(dfn) 120 | { 121 | this.hovercard.innerHTML = dfn.crossLinkContent; 122 | dfn.appendChild(this.hovercard); 123 | } 124 | 125 | DefinitionsCrossLinker.prototype.closeHovercard = function(dfn) 126 | { 127 | if (!this.hovercard.parentElement) 128 | return; 129 | 130 | this.hovercard.parentElement.removeChild(this.hovercard); 131 | } 132 | 133 | DefinitionsCrossLinker.prototype.findCrossLinkHeading = function(a) 134 | { 135 | var element = a; 136 | while(element = element.previousSibling || element.parentElement) { 137 | if (element.id && (element instanceof HTMLHeadingElement || element.tagName == "SECTION")) 138 | break; 139 | } 140 | return element; 141 | } 142 | 143 | DefinitionsCrossLinker.prototype.createCrossLink = function(backId, title) 144 | { 145 | return '' + title + ' '; 146 | } 147 | 148 | DefinitionsCrossLinker.prototype.createCrossLinks = function(dfn) 149 | { 150 | var id = dfn.id; 151 | var links = ['No references.']; 152 | 153 | if (!dfn.classList.contains('no-backreference')) { 154 | var headings = {}; 155 | [].forEach.call(document.querySelectorAll('a[href="#' + id + '"]'), function(a, i) { 156 | var backId; 157 | if (a.id) { 158 | backId = a.id; 159 | } else { 160 | backId = 'back-' + id + '-' + i; 161 | a.id = backId; 162 | } 163 | var heading = this.findCrossLinkHeading(a); 164 | var titles = headings[heading.id]; 165 | if (titles){ 166 | titles.push(this.createCrossLink(backId, '(' + (titles.length + 1) + ')')); 167 | } else { 168 | var title; 169 | if (heading.tagName == "SECTION" && heading.id) 170 | title = heading.id; 171 | else 172 | title = heading.textContent; 173 | titles = headings[heading.id] = [ this.createCrossLink(backId, title) ]; 174 | } 175 | }, this); 176 | 177 | var keys = Object.keys(headings); 178 | if (!keys.length) { 179 | dfn.classList.add('no-references'); 180 | } else { 181 | links = keys.map(function(key) { 182 | return '
  • ' + headings[key].join('') + '
    • '; 183 | }); 184 | } 185 | } 186 | dfn.crossLinkContent = '
    #' + id + '
      ' + links.join('') + '
    '; 187 | } 188 | 189 | var assistants = [ new LastUpdatedDateFetcher(), new TableOfContentsEnumerator(), new DefinitionsCrossLinker() ]; 190 | 191 | document.addEventListener('DOMContentLoaded', function() { 192 | assistants.forEach(function(assistant) { 193 | assistant.initialize(); 194 | }); 195 | }); 196 | 197 | }()); 198 | -------------------------------------------------------------------------------- /assets/scripts/spec-assist_unittests.js: -------------------------------------------------------------------------------- 1 | /* Unit tests for spec-assist wil go here */ 2 | -------------------------------------------------------------------------------- /assets/styles/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0 auto; 3 | padding: 0; 4 | line-height: 1.4em; 5 | font-family: 'Ovo', serif; 6 | width: 60em; 7 | } 8 | 9 | figure { 10 | width: 600px; 11 | margin: 0 auto; 12 | display: block; 13 | } 14 | 15 | figcaption { 16 | font-size: 0.8em; 17 | } 18 | 19 | h1, h2, h3, h4 { 20 | font-family: 'Open Sans', sans-serif; 21 | color: #333; 22 | padding: 0; 23 | } 24 | 25 | h1 { 26 | font-size: 3em; 27 | line-height: 1em; 28 | margin: 1em 0; 29 | } 30 | 31 | h2, h3 { 32 | margin: 1.5em 0 0.3em 0; 33 | } 34 | 35 | h1, h2, h3, h4 { 36 | color: #005A9C; 37 | } 38 | 39 | a { 40 | color: Black; 41 | } 42 | 43 | code { 44 | background-color: #eee; 45 | font-family: 'Droid Sans Mono', monospace; 46 | font-size: 0.8em; 47 | } 48 | 49 | body>pre.prettyprint, body>section pre { 50 | background-color: #eee; 51 | padding: 0 2em 1em 2em; 52 | margin: 0; 53 | border: none; 54 | } 55 | 56 | address { 57 | font-style: normal; 58 | } 59 | 60 | object { 61 | margin: 0 auto; 62 | display: block; 63 | } 64 | 65 | header>ul { 66 | font-family: 'Open Sans', sans-serif; 67 | font-size: 0.8em; 68 | list-style: none; 69 | margin: 0 -1em; 70 | padding: 0.3em 0; 71 | background-color: #eee; 72 | } 73 | 74 | header>ul>li { 75 | display: inline; 76 | margin: 0 0 0 1em; 77 | } 78 | 79 | header>ul>li:nth-of-type(3) { 80 | display: inline; 81 | margin: 0 0 0 5em; 82 | } 83 | 84 | 85 | header>ul a { 86 | color: #666; 87 | } 88 | 89 | header>ul a:hover { 90 | color: #000; 91 | } 92 | 93 | code>ins { 94 | background-color: #BBFFDF; 95 | text-decoration: none; 96 | } 97 | 98 | code>del { 99 | background-color: #FF979D; 100 | } 101 | 102 | -------------------------------------------------------------------------------- /assets/styles/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /assets/styles/respec-complement.css: -------------------------------------------------------------------------------- 1 | span.shadow-boundary { 2 | color: Gray; 3 | } 4 | 5 | table { 6 | border: 1px solid #ccc; 7 | } 8 | 9 | table code { 10 | background-color: transparent; 11 | } 12 | 13 | td, th { 14 | padding: 0.5em; 15 | vertical-align: top; 16 | } 17 | 18 | td { 19 | border-bottom: 1px solid #ddd; 20 | } 21 | 22 | tr:last-of-type td { 23 | border-bottom: none; 24 | } 25 | 26 | th { 27 | text-align: left; 28 | background-color: #eee; 29 | } 30 | 31 | div.algorithm { 32 | padding: 0 0 0 20px; 33 | border-left: .5em solid #EAF7F9; 34 | } 35 | 36 | #bug-assist-form { 37 | position: fixed; 38 | width: 10em; 39 | top: 5em; 40 | right: 1em; 41 | font-family: Tahoma,sans-serif; 42 | font-size: 11px; 43 | opacity:0.8; 44 | text-align:right; 45 | } 46 | -------------------------------------------------------------------------------- /assets/styles/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'To be addressed'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | .warning:before { 76 | content: "WARNING: "; 77 | font-weight: bold; 78 | } 79 | 80 | .warning { 81 | padding: 10px 10px; 82 | width: 100%; 83 | background: #fffaba; 84 | box-sizing: border-box; 85 | } 86 | 87 | dfn { 88 | font-style: normal; 89 | font-weight: bold; 90 | background-color: #f9f9f9; 91 | padding: 0 2px; 92 | border: 1px solid #eee; 93 | } 94 | 95 | dfn.no-references { 96 | background-color: #ffefef; 97 | } 98 | 99 | dfn:target, a:target { 100 | background-color: #FFFF91; 101 | } 102 | 103 | a { 104 | text-decoration: none; 105 | border-bottom: 1px solid #666; 106 | } 107 | 108 | a[href*=dfn-] { 109 | border-bottom: 1px dotted #ccc; 110 | } 111 | 112 | div.logo>a { 113 | border-bottom: none; 114 | } 115 | 116 | var { 117 | font-size: 0.8em; 118 | color: #005A9C; 119 | font-style: normal; 120 | } 121 | 122 | table { 123 | border: 1px solid #ccc; 124 | } 125 | 126 | table code { 127 | background-color: transparent; 128 | } 129 | 130 | td, th { 131 | padding: 0.5em; 132 | vertical-align: top; 133 | } 134 | 135 | td { 136 | border-bottom: 1px solid #ddd; 137 | } 138 | 139 | tr:last-of-type td { 140 | border-bottom: none; 141 | } 142 | 143 | th { 144 | text-align: left; 145 | background-color: #eee; 146 | } 147 | 148 | dt { 149 | font-weight: bold; 150 | } 151 | 152 | dd { 153 | padding-bottom: 7px; 154 | } 155 | 156 | div.algorithm { 157 | padding: 0 0 0 20px; 158 | border-left: 5px solid #EAF7F9; 159 | } 160 | 161 | div.informative:before { 162 | content: 'Informative'; 163 | float: right; 164 | display: block; 165 | padding: 2px 10px; 166 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 167 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 168 | font-size: 0.9em; 169 | } 170 | 171 | div.informative { 172 | padding: 10px 0 0 20px; 173 | border-left: 5px solid #D3EEDF; 174 | } 175 | 176 | div.monkeypatch:before { 177 | content: 'Monkeypatch'; 178 | float: right; 179 | display: block; 180 | padding: 2px 10px; 181 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 182 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 183 | font-size: 0.9em; 184 | } 185 | 186 | div.monkeypatch { 187 | padding: 10px 0 0 20px; 188 | border-left: 5px solid #EEE5D3; 189 | } 190 | 191 | div.deprecated:before { 192 | content: 'Deprecated parts'; 193 | float: right; 194 | display: block; 195 | padding: 2px 10px; 196 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #fffaba 100%); 197 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #fffaba 100%); 198 | font-size: 0.9em; 199 | } 200 | 201 | div.deprecated { 202 | opacity: 0.6; 203 | } 204 | 205 | b.hovercard { 206 | position: absolute; 207 | font-size: 12px; 208 | width: 200px; 209 | background-color: white; 210 | border: 1px #ddd solid; 211 | width: auto; 212 | height: auto; 213 | cursor: pointer; 214 | -webkit-box-shadow: 2px 2px 5px 2px #eee; 215 | } 216 | 217 | b.hovercard>div.title { 218 | padding: 5px 10px 2px 5px; 219 | background-color: #fcfcfc; 220 | border-bottom: 1px #ddd solid; 221 | } 222 | 223 | b.hovercard>ol { 224 | list-style: none; 225 | margin: 0; 226 | padding: 5px 10px 10px 15px; 227 | } 228 | 229 | b.hovercard li { 230 | padding: 0 5px 0 0; 231 | } 232 | 233 | b.hovercard a { 234 | border-bottom: none; 235 | color: black; 236 | } 237 | 238 | text { 239 | font-size: 12px; 240 | } 241 | 242 | #bug-assist-form { 243 | position: fixed; 244 | width: 10em; 245 | top: 1em; 246 | right: 1em; 247 | font-family: Tahoma,sans-serif; 248 | font-size: 11px; 249 | opacity:0.8; 250 | text-align:right; 251 | } 252 | .example { 253 | background: none repeat scroll 0 0 #fcfcfc; 254 | border-color: #c0c0c0; 255 | border-left: 0.25em solid #c0c0c0; 256 | color: #222222; 257 | display: block; 258 | margin-left: 1em; 259 | padding-bottom: 0.5em; 260 | padding-left: 1em; 261 | } 262 | 263 | div.example:before { 264 | content: "Code Example: "; 265 | font-weight: bolder; 266 | } 267 | 268 | p.note { 269 | background: none repeat scroll 0 0 #e9fbe9; 270 | border-color: #52e052; 271 | border-left: 0.25em solid #52e052; 272 | font-style:normal; 273 | font-weight:normal; 274 | font-size:medium; 275 | color: #000000; 276 | 277 | 278 | } 279 | p.note:before {font-weight:bold;} -------------------------------------------------------------------------------- /explainer/bug-assist.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Simple Bug File Assistant. 4 | Find bugs? File a bug. 5 | To configure, use data-* attributes on as follows: 6 | 7 | * Are taken into account all attributes starting with data-bug-*, what follows that is the name 8 | of the Bugzilla form parameter. 9 | * The name "data-bug-blocked" is special. If present, the assistant adds a link to the dependency 10 | tree of this bug. 11 | * The name "data-bug-comment" is overriden if the user selects text. 12 | 13 | Sample use and configuration: 14 | 15 | 17 | 18 | ... 19 | */ 20 | 21 | document.addEventListener('DOMContentLoaded', function() { 22 | var BUGS_PREFIX = "data-bug-"; 23 | 24 | var inputs = { comment: "" }; 25 | 26 | [].forEach.call(document.documentElement.attributes, function (attr) { 27 | if (attr.name.indexOf(BUGS_PREFIX) === 0) 28 | inputs[attr.name.substr(BUGS_PREFIX.length)] = attr.value; 29 | }); 30 | 31 | var blocked = inputs.blocked; 32 | 33 | var form = document.body.appendChild(document.createElement('form')); 34 | form.style.cssText = 'position:fixed;padding:5px;top:1em;right:2em;font-family:sans-serif;font-size:0.8em;background-color:#ffffff;border: 1px solid #f00;'; 35 | form.action = 'http://www.w3.org/Bugs/Public/enter_bug.cgi'; 36 | form.target = '_blank'; 37 | form.textContent = 'Select text and '; 38 | 39 | var submit = form.appendChild(document.createElement('input')); 40 | submit.type = 'submit'; 41 | submit.accessKey = 'f'; 42 | submit.style.cssText = 'display: block;'; 43 | var label = 'file a bug'; 44 | if (submit.accessKeyLabel) 45 | label += ' (' + submit.accessKeyLabel + ')'; 46 | submit.value = label; 47 | 48 | Object.keys(inputs).forEach(function(name) { 49 | var input = form.appendChild(document.createElement('input')); 50 | input.type = 'hidden'; 51 | input.name = name; 52 | input.value = inputs[name]; 53 | inputs[name] = input; 54 | }); 55 | 56 | if (blocked) { 57 | form.appendChild(document.createTextNode(' or ')); 58 | var a = form.appendChild(document.createElement('a')); 59 | a.textContent = 'view bugs filed'; 60 | a.href = 'http://www.w3.org/Bugs/Public/showdependencytree.cgi?id=' + blocked; 61 | a.target = '_blank'; 62 | } 63 | //form.appendChild(document.createTextNode('.')); 64 | 65 | form.addEventListener('submit', function() { 66 | var selectedText = window.getSelection().toString(); 67 | if (selectedText) 68 | inputs.comment.value = '"' + selectedText + '"'; 69 | }, false); 70 | 71 | }, false); 72 | -------------------------------------------------------------------------------- /explainer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Introduction to Web Components 4 | 5 | 6 | 7 | 8 | 9 | 10 |
    11 | 12 | 15 | 16 |

    Introduction to Web Components

    17 |

    W3C Working Group Note 24 July 2014

    18 |
    19 |
    This version
    20 |
    http://www.w3.org/TR/2014/NOTE-components-intro-20140724/
    21 |
    Latest version
    22 |
    http://www.w3.org/TR/components-intro/
    23 |
    Latest editor's draft
    24 |
    http://w3c.github.io/webcomponents/explainer/
    25 |
    Previous version
    26 |
    http://www.w3.org/TR/2013/WD-components-intro-20130606/
    27 |
    Revision history
    28 |
    https://github.com/w3c/webcomponents/commits/gh-pages/explainer/
    29 |
    Participate
    30 |
    Discuss on public-webapps@w3.org (Web Applications Working Group)
    31 |
    File bugs (w3.org's Bugzilla)
    32 |
    Editors
    33 |
    Dimitri Glazkov, Google, <>
    34 |
    Hayato Ito, Google, <>
    35 |
    Authors
    36 |
    Dominic Cooney, Google, <>
    37 |
    38 | 39 |

    Copyright © 2014 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.

    40 | 41 |
    42 | 43 |

    Abstract

    44 | 45 |

    This document is a non-normative reference, which provides an overview of Web Components. It summarizes the normative information in the respective specifications in easy-to-digest prose with illustrations.

    46 | 47 |

    Status of This Document

    48 | 49 |

    This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

    50 | 51 |

    Work on this document has been discontinued and it should not be referenced. Numerous online resources about Web Components are available, including the Web Components wiki. 52 |

    53 | 54 |

    This document was published by the Web Applications Working Group as a Working Group Note. If you wish to make comments regarding this document, please send them to public-webapps@w3.org (subscribe, archives). All feedback is welcome.

    Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

    55 | 56 |

    This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

    57 | 58 |
    59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Components Specifications 5 | 6 | 7 |

    Web Components Specifications

    8 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /proposals/Default-Stylesheets:-Concept-and-Proposal.md: -------------------------------------------------------------------------------- 1 | ###### Prepared by Travis Leithead and Arron Eicholz 2 | 3 | # Concept 4 | 5 | While Shadow DOM offers web developers the affordance of a style isolation boundary, it is not always the case that a component desires pure isolation. In many cases, component authors (or more generally any web development team working together on a single composed web application) may want to associate a default style with a component without worrying that the specificity and/or ordering of the selectors might cause a conflict with other author styles intended to affect the same component. 6 | 7 | At Microsoft, our WinJS framework team ran into the above problem a lot: styles intended to be a baseline/ default style would inadvertently take precedence over other author styles due to how CSS calculates specificity within an author style sheet. 8 | 9 | To address these problems, authors should be able to indicate that a group of selectors shall be designated as "default" styles, to be processed at an earlier level in the cascade (i.e., applied before other author styles). Default styles allow authors to specify a set of styles that behave as if they were built-in or provided by the user agent itself. 10 | 11 | As with all proposals this is one possible implementation of the concept: 12 | 13 | # Proposal 14 | 15 | The @default rule 16 | 17 | ## Example: 18 | 19 | ```html 20 | 21 | 
    Text Color
    22 | 23 | ``` 24 | 25 | ```css 26 | @default { 27 | pre#color { color: red; } 28 | } 29 | pre { color: green; } 30 | ``` 31 | 32 | The `Text Color` is green. The author style (a less-specific selector) overrides the default style (a more specific selector) because it is evaluated earlier in the CSS cascade. Remove the author style (or set its color to ‘default’ to get back to the red default. 33 | 34 | ## Origin and Importance 35 | ###### A supplement to the section in CSS Cascading and Inheritance 36 | 37 | The origin of a declaration is based on where it comes from and its importance is whether or not it is declared !important (see below). The precedence of the various origins is, in descending order: 38 | 39 | 1. Transition declarations 40 | 2. Important user agent declarations 41 | 3. **Important default declarations** `<-- Added` 42 | 4. Important user declarations 43 | 5. Important override declarations 44 | 6. Important author declarations 45 | 7. Animation declarations 46 | 8. Normal override declarations 47 | 9. Normal author declarations 48 | 10. Normal user declarations 49 | 11. **Normal default declarations** `<-- Added` 50 | 12. Normal user agent declarations 51 | 52 | Declarations from origins earlier in this list win over declarations from later origins. 53 | 54 | ## Default values 55 | 56 | Each property has a default value, defined by the default style sheet. If no default style sheet is defined then the values are the same as the user agent style sheet. 57 | 58 | # Feedback on the Proposal 59 | 60 | 1. Why use another at-rule? Should the mechanism be done outside of CSS (e.g., a new `link[rel]` method)? 61 | 62 | * I think it may be useful for default styles to be nestable within other at-rules (and vice-versa), such as @document, @media, etc., which isn’t possible if defined out of CSS itself. 63 | * !unimportant was my initial idea that sprang to mind, but it might become tedious to add that annotation to a large set of styles... 64 | 65 | 2. What does !important do in a default style declaration? 66 | 67 | * Like in author style sheets, the !important rules promotes those declarations into another layer. This has 68 | the someone odd effect of making the default !important rules more important than a normal !important declaration! This is just how it fell out in the cascade order by natural reflection of the cascade. We could probably change this if necessary. 69 | -------------------------------------------------------------------------------- /proposals/Multiple-Shadow-Roots-as-"a-Shadow-Root-hosts-another-Shadow-Root".md: -------------------------------------------------------------------------------- 1 | Different view for Multiple Shadow Roots 2 | ========================== 3 | 4 | WIP. This will be a page which is a follow-up for https://www.w3.org/Bugs/Public/show_bug.cgi?id=23887#c191 5 | 6 | ---- 7 | 8 | Caution: This page is intended for implementors of Shadow DOM, rather than for web-dev. 9 | 10 | 11 | Have you wondered a reason why a [tree of trees] [tree of trees] defines that older shadow tree is the [parent tree] of the younger tree? Shouldn't they are sibling trees? If you are interested in the reason, please continue reading. 12 | 13 | [tree of trees]: http://w3c.github.io/webcomponents/spec/shadow/#trees-of-trees 14 | [parent tree]: http://w3c.github.io/webcomponents/spec/shadow/#dfn-parent-tree 15 | 16 | "Multiple Shadow Roots" as a syntax sugar for the different world. 17 | ------ 18 | 19 | Shadow DOM spec has a concept of [Multiple Shadow Roots]: One element can host *more than* one shadow roots. 20 | 21 | However, I can explain [Multiple Shadow Roots] without this *Multiple-ness*. Welcome to this *mirrored* world. 22 | In this different world, there is no [Multiple Shadow Roots] concept. 23 | An element can host only one Shadow Root. The mirrored world lacks this ability. 24 | However, to be fair, the mirrored world have the following feature: "A Shadow Root can host another Shadow Root." 25 | 26 | As a result, both worlds have an equivalent power. Let me explain the equivalence by examples. 27 | 28 | [Multiple Shadow Roots]: http://w3c.github.io/webcomponents/spec/shadow/#dfn-shadow-roots-list 29 | 30 | In the Multiple Shadow Roots World 31 | ------ 32 | 33 | Suppose an element, `host`, hosts three Shadow Roots, [SR1, SR2, SR3], where SR1 is the oldest shadow root, SR3 is the youngest shadow root. 34 | 35 | var sr1 = host.createShadowRoot(); 36 | var sr2 = host.createShadowRoot(); 37 | var sr3 = host.createShadowRoot(); 38 | 39 | // host ==(hosts)==> [sr1, sr2, sr3] 40 | 41 | In the Different World 42 | ------ 43 | Remember that Shadow Root also supports createShadowRoot() in this mirrored world. 44 | You can write the equivalent as follows: 45 | 46 | var sr1 = host.createShadowRoot(); 47 | var sr2 = sr1.createShadowRoot(); 48 | var sr3 = sr2.createShadowRoot(); 49 | 50 | Here, there are three shadow hosts, `host`, `sr1` and `sr2`. Each hosts `sr1`, `sr2` and `sr3`, respectively. 51 | 52 | // host ==(hosts)==> sr1 ==(hosts)==> sr2 ==(hosts) ==> sr3 53 | 54 | 55 | What does it mean? 56 | ------ 57 | 58 | Have you noticeed the similality between 1 and 2 in the following? 59 | 60 | 1. The relationship between Shadow Host and it's (oldest) Shadow Root 61 | 2. The relationship between the older Shadow Root and it's younger Shadow Root 62 | 63 | There is no *significant* difference between A and B. Let's think how browser works for them: 64 | 65 | > "I'm a Browser. I'm now about to render an element, `A`. 66 | > Wait. This elment `A` is hosting the (oldest) shadow root, `SR1`. Okay, I won't travese the child nodes of `A`. Instead, let me go down to `SR1` and continue rendering from there" 67 | 68 | > "I'm a Browser. I'm now about to render an shadow root, `SR1`. 69 | > Wait. This `SR1` *hosts* the (younger) shadow root, `SR2`. Okay, I won't traverse the child nodes of `SR1`. Instead, let me go down to `SR2` and continue rendering from there" 70 | 71 | > "I'm a Browser. I'm now about to render an shadow root, `SR2`. 72 | > Wait. This `SR2` *hosts* the (youngest) shadow root, `SR3`. Okay, I won't render the child nodes of `SR2`. Instead, let me go down to `SR3` and continue rendering from there" 73 | 74 | 75 | That means, in any worlds, instead of (child nodes of) an element A, (a subtree of) SR3 is going to be rendered. Nothing has changed from the user's perspective. 76 | 77 | 78 | What benefits can we get from this different view? 79 | ------ 80 | 81 | Good question. The difference sounds like a kind of an implementation details. Who should care for that? 82 | 83 | I care. I've seen a lot of benefits from this different view when I was thinking an algorithm in the Shadow DOM spec. This actually made the spec *much* simpler, though I guess you didn't think so. :) 84 | 85 | For example, thanks to the definition of tree of trees, I don't have to mention about Multiple Shadow Roots at defining [Event Retargeting] algorithm, [Event RelatedTarget Retargeting] algorithm and so on. I can use a *familiar* term like the *lowest common ancestor tree*. 86 | 87 | [Event Retargeting]: http://w3c.github.io/webcomponents/spec/shadow/#event-retargeting. 88 | [Event RelatedTarget Retargeting]: http://w3c.github.io/webcomponents/spec/shadow/#retargeting-relatedtarget 89 | 90 | Now I've found that [event path] calculation algorithm can get benefits too. See the [comment](https://www.w3.org/Bugs/Public/show_bug.cgi?id=23887#c191). 91 | 92 | [event path]: http://w3c.github.io/webcomponents/spec/shadow/#event-paths 93 | 94 | There, we don't need to distinguish between content insertion points and shadow insertion points at all. {older shadow roots, younger shadow roots, oldest shadow roots, youngest shadow roots} neither. 95 | 96 | The benefits are: Those algorithms don't have to pay attention to the existence of "Multiple Shadow Roots". Those algorithm don't change at all if we were to remove "Multiple Shadow Roots" from the spec. Benefits. 97 | 98 | Appendix 99 | ----- 100 | 101 | Imagine that we are living in the mirrored world, where ShadowRoot supports ShadowRoot.createShadowRoot() API. No one in this world uses a term of "Multiple Shadow Roots". 102 | 103 | In this mirrored world, if you were to support Element.createShadowRoot() which behaves as the current spec defines, we could implement it easily as follows: 104 | 105 | function createShadowRootWrapperForMultipleShadowRootsWorld() { 106 | if (this.shadowRoot()) { 107 | return this.shadowRoot().createShadowRootWrapperForMultipleShadowRootsWorld(); 108 | } else { 109 | return this.createShadowRoot(); 110 | } 111 | } 112 | 113 | The similar thing also applies to the current `Element.shadowRoot()` API, which returns the youngest shadow root, rather than oldest shadow root. The following is the implementation: 114 | 115 | function youngestShadowRootWrapperForMultipleShadowRootsWorld() { 116 | var sr = this.shadowRoot(); 117 | if (!sr) return null; 118 | while (sr.shadowRoot()) { 119 | sr = sr.shadowRoot(); 120 | } 121 | return sr; 122 | } 123 | } 124 | 125 | You can think the current APIs are just wrappers to support *pseudo* "Multiple Shadow Roots" in the mirrored world. 126 | -------------------------------------------------------------------------------- /proposals/Partial-Redistributions-Analysis.md: -------------------------------------------------------------------------------- 1 | # Analysis of Partial Redistributions in Shadow DOM 2 | 3 | See [Imperative API doc](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Imperative-API-for-Node-Distribution-in-Shadow-DOM.md#imperative-api-for-node-distribution-in-shadow-dom) for definition of redistribution. 4 | 5 | **Partial Redistribution** happens when nodes are not wholly redistributed from one insertion point into another. For example: 6 | 7 | ### Unpacking redistribution example 8 | 9 | ```html 10 | 11 | 12 | ... 13 | 14 |
    Glorious Title
    15 |
    [ICON]
    16 | ... 17 |     18 | ... 19 | 20 | 21 |
    22 | 23 | 24 | 25 | ... 26 |
    27 | 28 | 29 |
    30 | 31 |
    32 |
    33 | 34 |
    35 | 36 | 37 | 38 | #shadowroot 39 |
    40 | 41 | #shadowroot 42 |
    43 |
    [ICON]
    44 |
    45 |
    46 |
    Glorious Title
    47 |
    48 | /#shadowroot 49 |     50 |
    51 | /#shadowroot 52 |     53 | ``` 54 | 55 | In this case, nodes distributed into one insertion point `#a` (that's `#one` and `#two`) are then redistributed into two insertion points `#b` (`#two`) and `#c` (`#one`). 56 | 57 | In loose terms of shadow tree API (where insertion points could be viewed as [parameters](http://en.wikipedia.org/wiki/Parameter_%28computer_programming%29) and host's children are [arguments](http://en.wikipedia.org/wiki/Parameter_%28computer_programming%29#Argument_passing)), this type of partial could described as **unpacking**: that is, one tree API's parameter is *unpacked* into two or more arguments for nested tree APIs: 58 | 59 | ```js 60 | // illustration purposes only, not a real JS API. 61 | define('d-toolbar', [ 'top', 'bottom' ], (top, bottom) => { 62 | ... 63 | }); 64 | 65 | define('d-scaffold', [ 'tool', ... ], (tool, ...) => { 66 | render('d-toolbar', { 67 | top: tool.unpack('.top'), 68 | bottom: tool.unpack('.bottom') 69 | }) 70 | ... 71 | }); 72 | 73 | ``` 74 | 75 | ### Refactoring Unpacking into Whole Distribution 76 | 77 | It's fairly straightforward to turn any **unpacking** partial redistribution into a whole distribution. The pattern here is to factor unpacking up into the nesting API: 78 | 79 | 80 | ```js 81 | // illustration purposes only, not a real JS API. 82 | define('d-toolbar', [ 'top', 'bottom' ], (top, bottom) => { 83 | ... 84 | }); 85 | 86 | define('d-scaffold', [ 'tool-top', 'tool', ... ], (toolTop, tool, ...) => { 87 | render('d-toolbar', { 88 | top: toolTop, 89 | bottom: tool 90 | }) 91 | ... 92 | }); 93 | 94 | ``` 95 | 96 | Or, in the HTML example above: 97 | 98 | ### Unpacking Refactoring Example 99 | 100 | ```html 101 | 102 | 103 | ... 104 | 105 |
    Glorious Title
    106 |
    [ICON]
    107 | ... 108 |     109 | ... 110 | 111 | 112 |
    113 | 114 | 115 | 116 | 117 | ... 118 |
    119 | 120 | 121 |
    122 | 123 |
    124 |
    125 | 126 |
    127 | 128 | 129 | 130 | #shadowroot 131 |
    132 | 133 | #shadowroot 134 |
    135 |
    [ICON]
    136 |
    137 |
    138 |
    Glorious Title
    139 |
    140 | /#shadowroot 141 |     142 |
    143 | /#shadowroot 144 |     145 | ``` -------------------------------------------------------------------------------- /publish/custom/LCWD-custom-elements-20131024/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/custom/LCWD-custom-elements-20131024/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'To be addressed'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | .warning:before { 76 | content: "WARNING: "; 77 | font-weight: bold; 78 | } 79 | 80 | .warning { 81 | padding: 10px 10px; 82 | width: 100%; 83 | background: #fffaba; 84 | box-sizing: border-box; 85 | } 86 | 87 | dfn { 88 | font-style: normal; 89 | font-weight: bold; 90 | background-color: #f9f9f9; 91 | padding: 0 2px; 92 | border: 1px solid #eee; 93 | } 94 | 95 | dfn.no-references { 96 | background-color: #ffefef; 97 | } 98 | 99 | dfn:target, a:target { 100 | background-color: #FFFF91; 101 | } 102 | 103 | a { 104 | text-decoration: none; 105 | border-bottom: 1px solid #666; 106 | } 107 | 108 | a[href*=dfn-] { 109 | border-bottom: 1px dotted #ccc; 110 | } 111 | 112 | div.logo>a { 113 | border-bottom: none; 114 | } 115 | 116 | var { 117 | font-size: 0.8em; 118 | color: #005A9C; 119 | font-style: normal; 120 | } 121 | 122 | table { 123 | border: 1px solid #ccc; 124 | } 125 | 126 | table code { 127 | background-color: transparent; 128 | } 129 | 130 | td, th { 131 | padding: 0.5em; 132 | vertical-align: top; 133 | } 134 | 135 | td { 136 | border-bottom: 1px solid #ddd; 137 | } 138 | 139 | tr:last-of-type td { 140 | border-bottom: none; 141 | } 142 | 143 | th { 144 | text-align: left; 145 | background-color: #eee; 146 | } 147 | 148 | dt { 149 | font-weight: bold; 150 | } 151 | 152 | dd { 153 | padding-bottom: 7px; 154 | } 155 | 156 | div.algorithm { 157 | padding: 0 0 0 20px; 158 | border-left: 5px solid #EAF7F9; 159 | } 160 | 161 | div.informative:before { 162 | content: 'Informative'; 163 | float: right; 164 | display: block; 165 | padding: 2px 10px; 166 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 167 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 168 | font-size: 0.9em; 169 | } 170 | 171 | div.informative { 172 | padding: 10px 0 0 20px; 173 | border-left: 5px solid #D3EEDF; 174 | } 175 | 176 | div.monkeypatch:before { 177 | content: 'Monkeypatch'; 178 | float: right; 179 | display: block; 180 | padding: 2px 10px; 181 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 182 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 183 | font-size: 0.9em; 184 | } 185 | 186 | div.monkeypatch { 187 | padding: 10px 0 0 20px; 188 | border-left: 5px solid #EEE5D3; 189 | } 190 | 191 | div.deprecated:before { 192 | content: 'Deprecated parts'; 193 | float: right; 194 | display: block; 195 | padding: 2px 10px; 196 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #fffaba 100%); 197 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #fffaba 100%); 198 | font-size: 0.9em; 199 | } 200 | 201 | div.deprecated { 202 | opacity: 0.6; 203 | } 204 | 205 | b.hovercard { 206 | position: absolute; 207 | font-size: 12px; 208 | width: 200px; 209 | background-color: white; 210 | border: 1px #ddd solid; 211 | width: auto; 212 | height: auto; 213 | cursor: pointer; 214 | -webkit-box-shadow: 2px 2px 5px 2px #eee; 215 | } 216 | 217 | b.hovercard>div.title { 218 | padding: 5px 10px 2px 5px; 219 | background-color: #fcfcfc; 220 | border-bottom: 1px #ddd solid; 221 | } 222 | 223 | b.hovercard>ol { 224 | list-style: none; 225 | margin: 0; 226 | padding: 5px 10px 10px 15px; 227 | } 228 | 229 | b.hovercard li { 230 | padding: 0 5px 0 0; 231 | } 232 | 233 | b.hovercard a { 234 | border-bottom: none; 235 | color: black; 236 | } 237 | 238 | text { 239 | font-size: 12px; 240 | } -------------------------------------------------------------------------------- /publish/custom/WD-custom-elements-20130514/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/custom/WD-custom-elements-20130514/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'Informative'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | dfn { 76 | font-style: normal; 77 | font-weight: bold; 78 | background-color: #f9f9f9; 79 | padding: 0 2px; 80 | border: 1px solid #eee; 81 | } 82 | 83 | dfn:target { 84 | background-color: #FFFF91; 85 | } 86 | 87 | a { 88 | text-decoration: none; 89 | border-bottom: 1px solid #666; 90 | } 91 | 92 | a[href*=dfn-] { 93 | border-bottom: 1px dotted #ccc; 94 | } 95 | 96 | div.logo>a { 97 | border-bottom: none; 98 | } 99 | 100 | var { 101 | font-size: 0.8em; 102 | color: #005A9C; 103 | font-style: normal; 104 | } 105 | 106 | table { 107 | border: 1px solid #ccc; 108 | } 109 | 110 | table code { 111 | background-color: transparent; 112 | } 113 | 114 | td, th { 115 | padding: 0.5em; 116 | vertical-align: top; 117 | } 118 | 119 | td { 120 | border-bottom: 1px solid #ddd; 121 | } 122 | 123 | tr:last-of-type td { 124 | border-bottom: none; 125 | } 126 | 127 | th { 128 | text-align: left; 129 | background-color: #eee; 130 | } 131 | 132 | dt { 133 | font-weight: bold; 134 | } 135 | 136 | dd { 137 | padding-bottom: 7px; 138 | } 139 | 140 | div.algorithm { 141 | padding: 0 0 0 20px; 142 | border-left: 5px solid #EAF7F9; 143 | } 144 | 145 | div.informative:before { 146 | content: 'Informative'; 147 | float: right; 148 | display: block; 149 | padding: 2px 10px; 150 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 151 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 152 | font-size: 0.9em; 153 | } 154 | 155 | div.informative { 156 | padding: 10px 0 0 20px; 157 | border-left: 5px solid #D3EEDF; 158 | } 159 | 160 | div.monkeypatch:before { 161 | content: 'Monkeypatch'; 162 | float: right; 163 | display: block; 164 | padding: 2px 10px; 165 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 166 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 167 | font-size: 0.9em; 168 | } 169 | 170 | div.monkeypatch { 171 | padding: 10px 0 0 20px; 172 | border-left: 5px solid #EEE5D3; 173 | } 174 | -------------------------------------------------------------------------------- /publish/custom/WD-custom-elements-20141218/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/custom/WD-custom-elements-20141218/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'To be addressed'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | .warning:before { 76 | content: "WARNING: "; 77 | font-weight: bold; 78 | } 79 | 80 | .warning { 81 | padding: 10px 10px; 82 | width: 100%; 83 | background: #fffaba; 84 | box-sizing: border-box; 85 | } 86 | 87 | dfn { 88 | font-style: normal; 89 | font-weight: bold; 90 | background-color: #f9f9f9; 91 | padding: 0 2px; 92 | border: 1px solid #eee; 93 | } 94 | 95 | dfn.no-references { 96 | background-color: #ffefef; 97 | } 98 | 99 | dfn:target, a:target { 100 | background-color: #FFFF91; 101 | } 102 | 103 | a { 104 | text-decoration: none; 105 | border-bottom: 1px solid #666; 106 | } 107 | 108 | a[href*=dfn-] { 109 | border-bottom: 1px dotted #ccc; 110 | } 111 | 112 | div.logo>a { 113 | border-bottom: none; 114 | } 115 | 116 | var { 117 | font-size: 0.8em; 118 | color: #005A9C; 119 | font-style: normal; 120 | } 121 | 122 | table { 123 | border: 1px solid #ccc; 124 | } 125 | 126 | table code { 127 | background-color: transparent; 128 | } 129 | 130 | td, th { 131 | padding: 0.5em; 132 | vertical-align: top; 133 | } 134 | 135 | td { 136 | border-bottom: 1px solid #ddd; 137 | } 138 | 139 | tr:last-of-type td { 140 | border-bottom: none; 141 | } 142 | 143 | th { 144 | text-align: left; 145 | background-color: #eee; 146 | } 147 | 148 | dt { 149 | font-weight: bold; 150 | } 151 | 152 | dd { 153 | padding-bottom: 7px; 154 | } 155 | 156 | div.algorithm { 157 | padding: 0 0 0 20px; 158 | border-left: 5px solid #EAF7F9; 159 | } 160 | 161 | div.informative:before { 162 | content: 'Informative'; 163 | float: right; 164 | display: block; 165 | padding: 2px 10px; 166 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 167 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 168 | font-size: 0.9em; 169 | } 170 | 171 | div.informative { 172 | padding: 10px 0 0 20px; 173 | border-left: 5px solid #D3EEDF; 174 | } 175 | 176 | div.monkeypatch:before { 177 | content: 'Monkeypatch'; 178 | float: right; 179 | display: block; 180 | padding: 2px 10px; 181 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 182 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 183 | font-size: 0.9em; 184 | } 185 | 186 | div.monkeypatch { 187 | padding: 10px 0 0 20px; 188 | border-left: 5px solid #EEE5D3; 189 | } 190 | 191 | div.deprecated:before { 192 | content: 'Deprecated parts'; 193 | float: right; 194 | display: block; 195 | padding: 2px 10px; 196 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #fffaba 100%); 197 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #fffaba 100%); 198 | font-size: 0.9em; 199 | } 200 | 201 | div.deprecated { 202 | opacity: 0.6; 203 | } 204 | 205 | b.hovercard { 206 | position: absolute; 207 | font-size: 12px; 208 | width: 200px; 209 | background-color: white; 210 | border: 1px #ddd solid; 211 | width: auto; 212 | height: auto; 213 | cursor: pointer; 214 | -webkit-box-shadow: 2px 2px 5px 2px #eee; 215 | } 216 | 217 | b.hovercard>div.title { 218 | padding: 5px 10px 2px 5px; 219 | background-color: #fcfcfc; 220 | border-bottom: 1px #ddd solid; 221 | } 222 | 223 | b.hovercard>ol { 224 | list-style: none; 225 | margin: 0; 226 | padding: 5px 10px 10px 15px; 227 | } 228 | 229 | b.hovercard li { 230 | padding: 0 5px 0 0; 231 | } 232 | 233 | b.hovercard a { 234 | border-bottom: none; 235 | color: black; 236 | } 237 | 238 | text { 239 | font-size: 12px; 240 | } 241 | 242 | #bug-assist-form { 243 | position: fixed; 244 | width: 10em; 245 | top: 1em; 246 | right: 1em; 247 | font-family: Tahoma,sans-serif; 248 | font-size: 11px; 249 | opacity:0.8; 250 | text-align:right; 251 | } 252 | .example { 253 | background: none repeat scroll 0 0 #fcfcfc; 254 | border-color: #c0c0c0; 255 | border-left: 0.25em solid #c0c0c0; 256 | color: #222222; 257 | display: block; 258 | margin-left: 1em; 259 | padding-bottom: 0.5em; 260 | padding-left: 1em; 261 | } 262 | 263 | div.example:before { 264 | content: "Code Example: "; 265 | font-weight: bolder; 266 | } 267 | 268 | p.note { 269 | background: none repeat scroll 0 0 #e9fbe9; 270 | border-color: #52e052; 271 | border-left: 0.25em solid #52e052; 272 | font-style:normal; 273 | font-weight:normal; 274 | font-size:medium; 275 | color: #000000; 276 | 277 | 278 | } 279 | p.note:before {font-weight:bold;} 280 | 281 | #wip-warning { 282 | position: fixed; 283 | margin: 0; 284 | padding: 10px 20px; 285 | background-color: Red; 286 | bottom: 0; 287 | } 288 | 289 | #wip-warning a { 290 | color: Yellow; 291 | border-bottom: none; 292 | text-decoration: underline; 293 | } 294 | 295 | #wip-warning a:hover { 296 | background-color: Red; 297 | } 298 | -------------------------------------------------------------------------------- /publish/explainer/WD-components-intro-20130606/event-handler-registration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/publish/explainer/WD-components-intro-20130606/event-handler-registration.png -------------------------------------------------------------------------------- /publish/explainer/WD-components-intro-20130606/event-routing-retargeting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/publish/explainer/WD-components-intro-20130606/event-routing-retargeting.png -------------------------------------------------------------------------------- /publish/explainer/WD-components-intro-20130606/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/explainer/WD-components-intro-20130606/shadow-rendering.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2011-12-20 21:33ZCanvas 1TreesShadow TreeNodesshadow hostshadow root childshadow root childTree as Rendered... 4 | -------------------------------------------------------------------------------- /publish/explainer/WD-components-intro-20130606/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'To be addressed'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | dfn { 76 | font-style: normal; 77 | font-weight: bold; 78 | background-color: #f9f9f9; 79 | padding: 0 2px; 80 | border: 1px solid #eee; 81 | } 82 | 83 | dfn:target { 84 | background-color: #FFFF91; 85 | } 86 | 87 | a { 88 | text-decoration: none; 89 | border-bottom: 1px solid #666; 90 | } 91 | 92 | a[href*=dfn-] { 93 | border-bottom: 1px dotted #ccc; 94 | } 95 | 96 | div.logo>a { 97 | border-bottom: none; 98 | } 99 | 100 | var { 101 | font-size: 0.8em; 102 | color: #005A9C; 103 | font-style: normal; 104 | } 105 | 106 | table { 107 | border: 1px solid #ccc; 108 | } 109 | 110 | table code { 111 | background-color: transparent; 112 | } 113 | 114 | td, th { 115 | padding: 0.5em; 116 | vertical-align: top; 117 | } 118 | 119 | td { 120 | border-bottom: 1px solid #ddd; 121 | } 122 | 123 | tr:last-of-type td { 124 | border-bottom: none; 125 | } 126 | 127 | th { 128 | text-align: left; 129 | background-color: #eee; 130 | } 131 | 132 | dt { 133 | font-weight: bold; 134 | } 135 | 136 | dd { 137 | padding-bottom: 7px; 138 | } 139 | 140 | div.algorithm { 141 | padding: 0 0 0 20px; 142 | border-left: 5px solid #EAF7F9; 143 | } 144 | 145 | div.informative:before { 146 | content: 'Informative'; 147 | float: right; 148 | display: block; 149 | padding: 2px 10px; 150 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 151 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 152 | font-size: 0.9em; 153 | } 154 | 155 | div.informative { 156 | padding: 10px 0 0 20px; 157 | border-left: 5px solid #D3EEDF; 158 | } 159 | 160 | div.monkeypatch:before { 161 | content: 'Monkeypatch'; 162 | float: right; 163 | display: block; 164 | padding: 2px 10px; 165 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 166 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 167 | font-size: 0.9em; 168 | } 169 | 170 | div.monkeypatch { 171 | padding: 10px 0 0 20px; 172 | border-left: 5px solid #EEE5D3; 173 | } 174 | -------------------------------------------------------------------------------- /publish/explainer/event-handler-registration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/publish/explainer/event-handler-registration.png -------------------------------------------------------------------------------- /publish/explainer/event-routing-retargeting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/publish/explainer/event-routing-retargeting.png -------------------------------------------------------------------------------- /publish/explainer/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/explainer/shadow-rendering.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2011-12-20 21:33ZCanvas 1TreesShadow DOM SubtreeNodesshadow hostshadow root childshadow root childTree as Rendered... 4 | -------------------------------------------------------------------------------- /publish/explainer/shadow-stack.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2012-05-03 21:52ZCanvas 1Layer 2Shadow DOM Subtree StackLayer 1Element Shadow TreeOldest Shadow SubtreeOlder Shadow SubtreeYounger Shadow SubtreeYoungest Shadow SubtreeShadow HostShadow Host Child Nodes- shadow insertion point- insertion point 4 | -------------------------------------------------------------------------------- /publish/explainer/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | background-color: red; 49 | color: white; 50 | } 51 | 52 | dfn { 53 | font-style: normal; 54 | background-color: #f9f9f9; 55 | padding: 0 2px; 56 | border: 1px solid #eee; 57 | } 58 | 59 | dfn:target { 60 | background-color: #FFFF91; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | border-bottom: 1px solid #666; 66 | } 67 | 68 | a[href*=dfn-] { 69 | border-bottom: 1px dotted #ccc; 70 | } 71 | 72 | div.logo>a { 73 | border-bottom: none; 74 | } 75 | 76 | var { 77 | font-size: 0.8em; 78 | color: #005A9C; 79 | font-style: normal; 80 | } 81 | 82 | table { 83 | border: 1px solid #ccc; 84 | } 85 | 86 | table code { 87 | background-color: transparent; 88 | } 89 | 90 | td, th { 91 | padding: 0.5em; 92 | vertical-align: top; 93 | } 94 | 95 | td { 96 | border-bottom: 1px solid #ddd; 97 | } 98 | 99 | tr:last-of-type td { 100 | border-bottom: none; 101 | } 102 | 103 | th { 104 | text-align: left; 105 | background-color: #eee; 106 | } 107 | 108 | dt { 109 | font-weight: bold; 110 | } 111 | 112 | dd { 113 | padding-bottom: 7px; 114 | } 115 | 116 | div.algorithm { 117 | padding: 0 0 0 20px; 118 | border-left: 5px solid #EAF7F9; 119 | } 120 | -------------------------------------------------------------------------------- /publish/imports/WD-html-imports-20130514/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/imports/WD-html-imports-20130514/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'Informative'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | dfn { 76 | font-style: normal; 77 | font-weight: bold; 78 | background-color: #f9f9f9; 79 | padding: 0 2px; 80 | border: 1px solid #eee; 81 | } 82 | 83 | dfn:target { 84 | background-color: #FFFF91; 85 | } 86 | 87 | a { 88 | text-decoration: none; 89 | border-bottom: 1px solid #666; 90 | } 91 | 92 | a[href*=dfn-] { 93 | border-bottom: 1px dotted #ccc; 94 | } 95 | 96 | div.logo>a { 97 | border-bottom: none; 98 | } 99 | 100 | var { 101 | font-size: 0.8em; 102 | color: #005A9C; 103 | font-style: normal; 104 | } 105 | 106 | table { 107 | border: 1px solid #ccc; 108 | } 109 | 110 | table code { 111 | background-color: transparent; 112 | } 113 | 114 | td, th { 115 | padding: 0.5em; 116 | vertical-align: top; 117 | } 118 | 119 | td { 120 | border-bottom: 1px solid #ddd; 121 | } 122 | 123 | tr:last-of-type td { 124 | border-bottom: none; 125 | } 126 | 127 | th { 128 | text-align: left; 129 | background-color: #eee; 130 | } 131 | 132 | dt { 133 | font-weight: bold; 134 | } 135 | 136 | dd { 137 | padding-bottom: 7px; 138 | } 139 | 140 | div.algorithm { 141 | padding: 0 0 0 20px; 142 | border-left: 5px solid #EAF7F9; 143 | } 144 | 145 | div.informative:before { 146 | content: 'Informative'; 147 | float: right; 148 | display: block; 149 | padding: 2px 10px; 150 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 151 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 152 | font-size: 0.9em; 153 | } 154 | 155 | div.informative { 156 | padding: 10px 0 0 20px; 157 | border-left: 5px solid #D3EEDF; 158 | } 159 | 160 | div.monkeypatch:before { 161 | content: 'Monkeypatch'; 162 | float: right; 163 | display: block; 164 | padding: 2px 10px; 165 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 166 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 167 | font-size: 0.9em; 168 | } 169 | 170 | div.monkeypatch { 171 | padding: 10px 0 0 20px; 172 | border-left: 5px solid #EEE5D3; 173 | } 174 | -------------------------------------------------------------------------------- /publish/imports/WD-html-imports-20140306/import-link-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dglazkov/webcomponents/4636bc4d2392c3460d96d8d07cbb50eb307e9bd7/publish/imports/WD-html-imports-20140306/import-link-list.png -------------------------------------------------------------------------------- /publish/imports/WD-html-imports-20140306/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/imports/WD-html-imports-20140306/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'To be addressed'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | .warning:before { 76 | content: "WARNING: "; 77 | font-weight: bold; 78 | } 79 | 80 | .warning { 81 | padding: 10px 10px; 82 | width: 100%; 83 | background: #fffaba; 84 | box-sizing: border-box; 85 | } 86 | 87 | dfn { 88 | font-style: normal; 89 | font-weight: bold; 90 | background-color: #f9f9f9; 91 | padding: 0 2px; 92 | border: 1px solid #eee; 93 | } 94 | 95 | dfn.no-references { 96 | background-color: #ffefef; 97 | } 98 | 99 | dfn:target, a:target { 100 | background-color: #FFFF91; 101 | } 102 | 103 | a { 104 | text-decoration: none; 105 | border-bottom: 1px solid #666; 106 | } 107 | 108 | a[href*=dfn-] { 109 | border-bottom: 1px dotted #ccc; 110 | } 111 | 112 | div.logo>a { 113 | border-bottom: none; 114 | } 115 | 116 | var { 117 | font-size: 0.8em; 118 | color: #005A9C; 119 | font-style: normal; 120 | } 121 | 122 | table { 123 | border: 1px solid #ccc; 124 | } 125 | 126 | table code { 127 | background-color: transparent; 128 | } 129 | 130 | td, th { 131 | padding: 0.5em; 132 | vertical-align: top; 133 | } 134 | 135 | td { 136 | border-bottom: 1px solid #ddd; 137 | } 138 | 139 | tr:last-of-type td { 140 | border-bottom: none; 141 | } 142 | 143 | th { 144 | text-align: left; 145 | background-color: #eee; 146 | } 147 | 148 | dt { 149 | font-weight: bold; 150 | } 151 | 152 | dd { 153 | padding-bottom: 7px; 154 | } 155 | 156 | div.algorithm { 157 | padding: 0 0 0 20px; 158 | border-left: 5px solid #EAF7F9; 159 | } 160 | 161 | div.informative:before { 162 | content: 'Informative'; 163 | float: right; 164 | display: block; 165 | padding: 2px 10px; 166 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 167 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 168 | font-size: 0.9em; 169 | } 170 | 171 | div.informative { 172 | padding: 10px 0 0 20px; 173 | border-left: 5px solid #D3EEDF; 174 | } 175 | 176 | div.monkeypatch:before { 177 | content: 'Monkeypatch'; 178 | float: right; 179 | display: block; 180 | padding: 2px 10px; 181 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 182 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 183 | font-size: 0.9em; 184 | } 185 | 186 | div.monkeypatch { 187 | padding: 10px 0 0 20px; 188 | border-left: 5px solid #EEE5D3; 189 | } 190 | 191 | div.deprecated:before { 192 | content: 'Deprecated parts'; 193 | float: right; 194 | display: block; 195 | padding: 2px 10px; 196 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #fffaba 100%); 197 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #fffaba 100%); 198 | font-size: 0.9em; 199 | } 200 | 201 | div.deprecated { 202 | opacity: 0.6; 203 | } 204 | 205 | b.hovercard { 206 | position: absolute; 207 | font-size: 12px; 208 | width: 200px; 209 | background-color: white; 210 | border: 1px #ddd solid; 211 | width: auto; 212 | height: auto; 213 | cursor: pointer; 214 | -webkit-box-shadow: 2px 2px 5px 2px #eee; 215 | } 216 | 217 | b.hovercard>div.title { 218 | padding: 5px 10px 2px 5px; 219 | background-color: #fcfcfc; 220 | border-bottom: 1px #ddd solid; 221 | } 222 | 223 | b.hovercard>ol { 224 | list-style: none; 225 | margin: 0; 226 | padding: 5px 10px 10px 15px; 227 | } 228 | 229 | b.hovercard li { 230 | padding: 0 5px 0 0; 231 | } 232 | 233 | b.hovercard a { 234 | border-bottom: none; 235 | color: black; 236 | } 237 | 238 | text { 239 | font-size: 12px; 240 | } 241 | 242 | #bug-assist-form { 243 | position: fixed; 244 | width: 10em; 245 | top: 1em; 246 | right: 1em; 247 | font-family: Tahoma,sans-serif; 248 | font-size: 11px; 249 | opacity:0.8; 250 | text-align:right; 251 | } 252 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20120522/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20120522/shadow-rendering.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2011-12-20 21:33ZCanvas 1TreesShadow DOM SubtreeNodesshadow hostshadow root childshadow root childTree as Rendered... 4 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20120522/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | background-color: red; 49 | color: white; 50 | } 51 | 52 | dfn { 53 | font-style: normal; 54 | background-color: #f9f9f9; 55 | padding: 0 2px; 56 | border: 1px solid #eee; 57 | } 58 | 59 | dfn:target { 60 | background-color: #FFFF91; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | border-bottom: 1px solid #666; 66 | } 67 | 68 | a[href*=dfn-] { 69 | border-bottom: 1px dotted #ccc; 70 | } 71 | 72 | div.logo>a { 73 | border-bottom: none; 74 | } 75 | 76 | var { 77 | font-size: 0.8em; 78 | color: #005A9C; 79 | font-style: normal; 80 | } 81 | 82 | table { 83 | border: 1px solid #ccc; 84 | } 85 | 86 | table code { 87 | background-color: transparent; 88 | } 89 | 90 | td, th { 91 | padding: 0.5em; 92 | vertical-align: top; 93 | } 94 | 95 | td { 96 | border-bottom: 1px solid #ddd; 97 | } 98 | 99 | tr:last-of-type td { 100 | border-bottom: none; 101 | } 102 | 103 | th { 104 | text-align: left; 105 | background-color: #eee; 106 | } 107 | 108 | dt { 109 | font-weight: bold; 110 | } 111 | 112 | dd { 113 | padding-bottom: 7px; 114 | } 115 | 116 | div.algorithm { 117 | padding: 0 0 0 20px; 118 | border-left: 5px solid #EAF7F9; 119 | } 120 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20121016/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20121016/shadow-rendering.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2011-12-20 21:33ZCanvas 1TreesShadow DOM SubtreeNodesshadow hostshadow root childshadow root childTree as Rendered... 4 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20121016/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | background-color: red; 49 | color: white; 50 | } 51 | 52 | dfn { 53 | font-style: normal; 54 | background-color: #f9f9f9; 55 | padding: 0 2px; 56 | border: 1px solid #eee; 57 | } 58 | 59 | dfn:target { 60 | background-color: #FFFF91; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | border-bottom: 1px solid #666; 66 | } 67 | 68 | a[href*=dfn-] { 69 | border-bottom: 1px dotted #ccc; 70 | } 71 | 72 | div.logo>a { 73 | border-bottom: none; 74 | } 75 | 76 | var { 77 | font-size: 0.8em; 78 | color: #005A9C; 79 | font-style: normal; 80 | } 81 | 82 | table { 83 | border: 1px solid #ccc; 84 | } 85 | 86 | table code { 87 | background-color: transparent; 88 | } 89 | 90 | td, th { 91 | padding: 0.5em; 92 | vertical-align: top; 93 | } 94 | 95 | td { 96 | border-bottom: 1px solid #ddd; 97 | } 98 | 99 | tr:last-of-type td { 100 | border-bottom: none; 101 | } 102 | 103 | th { 104 | text-align: left; 105 | background-color: #eee; 106 | } 107 | 108 | dt { 109 | font-weight: bold; 110 | } 111 | 112 | dd { 113 | padding-bottom: 7px; 114 | } 115 | 116 | div.algorithm { 117 | padding: 0 0 0 20px; 118 | border-left: 5px solid #EAF7F9; 119 | } 120 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20130514/common.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20130514/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20130514/shadow-rendering.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 2011-12-20 21:33ZCanvas 1TreesShadow TreeNodesshadow hostshadow root childshadow root childTree as Rendered... 4 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20130514/shadow-root-and-shadow-host.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | child element 9 | 10 | child 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | host element 34 | 35 | shadow host 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | shadow root 44 | 45 | shadow root 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20130514/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | display: block; 49 | padding: 10px 0 0 20px; 50 | border-left: 5px solid #E05252; 51 | } 52 | 53 | 54 | .fixme:before { 55 | content: 'Informative'; 56 | float: right; 57 | display: block; 58 | padding: 2px 10px; 59 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #FBE9E9 100%); 60 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #FBE9E9 100%); 61 | font-size: 0.9em; 62 | } 63 | 64 | .note { 65 | color: green; 66 | font-weight: bold; 67 | font-style: italic; 68 | padding-left: 2em; 69 | } 70 | 71 | .note:before { 72 | content: "Note: "; 73 | } 74 | 75 | dfn { 76 | font-style: normal; 77 | font-weight: bold; 78 | background-color: #f9f9f9; 79 | padding: 0 2px; 80 | border: 1px solid #eee; 81 | } 82 | 83 | dfn:target { 84 | background-color: #FFFF91; 85 | } 86 | 87 | a { 88 | text-decoration: none; 89 | border-bottom: 1px solid #666; 90 | } 91 | 92 | a[href*=dfn-] { 93 | border-bottom: 1px dotted #ccc; 94 | } 95 | 96 | div.logo>a { 97 | border-bottom: none; 98 | } 99 | 100 | var { 101 | font-size: 0.8em; 102 | color: #005A9C; 103 | font-style: normal; 104 | } 105 | 106 | table { 107 | border: 1px solid #ccc; 108 | } 109 | 110 | table code { 111 | background-color: transparent; 112 | } 113 | 114 | td, th { 115 | padding: 0.5em; 116 | vertical-align: top; 117 | } 118 | 119 | td { 120 | border-bottom: 1px solid #ddd; 121 | } 122 | 123 | tr:last-of-type td { 124 | border-bottom: none; 125 | } 126 | 127 | th { 128 | text-align: left; 129 | background-color: #eee; 130 | } 131 | 132 | dt { 133 | font-weight: bold; 134 | } 135 | 136 | dd { 137 | padding-bottom: 7px; 138 | } 139 | 140 | div.algorithm { 141 | padding: 0 0 0 20px; 142 | border-left: 5px solid #EAF7F9; 143 | } 144 | 145 | div.informative:before { 146 | content: 'Informative'; 147 | float: right; 148 | display: block; 149 | padding: 2px 10px; 150 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 151 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 152 | font-size: 0.9em; 153 | } 154 | 155 | div.informative { 156 | padding: 10px 0 0 20px; 157 | border-left: 5px solid #D3EEDF; 158 | } 159 | 160 | div.monkeypatch:before { 161 | content: 'Monkeypatch'; 162 | float: right; 163 | display: block; 164 | padding: 2px 10px; 165 | background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #D3EEDF 100%); 166 | background-image: linear-gradient(to bottom right, #FFFFFF 0%, #D3EEDF 100%); 167 | font-size: 0.9em; 168 | } 169 | 170 | div.monkeypatch { 171 | padding: 10px 0 0 20px; 172 | border-left: 5px solid #EEE5D3; 173 | } 174 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20140612/respec-complement.css: -------------------------------------------------------------------------------- 1 | span.shadow-boundary { 2 | color: Gray; 3 | } 4 | 5 | table { 6 | border: 1px solid #ccc; 7 | } 8 | 9 | table code { 10 | background-color: transparent; 11 | } 12 | 13 | td, th { 14 | padding: 0.5em; 15 | vertical-align: top; 16 | } 17 | 18 | td { 19 | border-bottom: 1px solid #ddd; 20 | } 21 | 22 | tr:last-of-type td { 23 | border-bottom: none; 24 | } 25 | 26 | th { 27 | text-align: left; 28 | background-color: #eee; 29 | } 30 | 31 | div.algorithm { 32 | padding: 0 0 0 20px; 33 | border-left: .5em solid #EAF7F9; 34 | } 35 | 36 | #bug-assist-form { 37 | position: fixed; 38 | width: 10em; 39 | top: 5em; 40 | right: 1em; 41 | font-family: Tahoma,sans-serif; 42 | font-size: 11px; 43 | opacity:0.8; 44 | text-align:right; 45 | } 46 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20140612/working-draft.css: -------------------------------------------------------------------------------- 1 | details.annoying-warning[open] { 2 | background: #fdd; 3 | color: red; 4 | font-weight: bold; 5 | text-align: center; 6 | padding: .5em; 7 | border: thick solid red; 8 | border-radius: 1em; 9 | position: fixed; 10 | left: 1em; 11 | right: 1em; 12 | bottom: 1em; 13 | z-index: 1000; 14 | } 15 | 16 | details.annoying-warning:not([open]) > summary { 17 | background: #fdd; 18 | color: red; 19 | font-weight: bold; 20 | text-align: center; 21 | padding: .5em; 22 | } 23 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20140619/respec-complement.css: -------------------------------------------------------------------------------- 1 | span.shadow-boundary { 2 | color: Gray; 3 | } 4 | 5 | table { 6 | border: 1px solid #ccc; 7 | } 8 | 9 | table code { 10 | background-color: transparent; 11 | } 12 | 13 | td, th { 14 | padding: 0.5em; 15 | vertical-align: top; 16 | } 17 | 18 | td { 19 | border-bottom: 1px solid #ddd; 20 | } 21 | 22 | tr:last-of-type td { 23 | border-bottom: none; 24 | } 25 | 26 | th { 27 | text-align: left; 28 | background-color: #eee; 29 | } 30 | 31 | div.algorithm { 32 | padding: 0 0 0 20px; 33 | border-left: .5em solid #EAF7F9; 34 | } 35 | 36 | #bug-assist-form { 37 | position: fixed; 38 | width: 10em; 39 | top: 5em; 40 | right: 1em; 41 | font-family: Tahoma,sans-serif; 42 | font-size: 11px; 43 | opacity:0.8; 44 | text-align:right; 45 | } 46 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20140619/working-draft.css: -------------------------------------------------------------------------------- 1 | #wipcontainer { 2 | position: fixed; 3 | bottom: 0px; 4 | margin: 0 0 0 -37.5%; 5 | width: 75%; 6 | left: 50%; 7 | z-index: 1000; 8 | } 9 | #wip { 10 | display: block; 11 | color: white; 12 | width: auto; 13 | border: thin solid rgb(141, 0, 0); 14 | border-bottom: none; 15 | border-radius: 0.5em 0.5em 0 0; 16 | box-shadow: 0 0 1em rgba(127, 127, 127, .5); 17 | padding: 1em 8em 1.5em 8em; 18 | margin: auto; 19 | background: #a90329; /* Old browsers */ 20 | background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */ 21 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */ 22 | background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */ 23 | background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */ 24 | background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */ 25 | background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */ 26 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */ 27 | 28 | text-align: center; 29 | font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; 30 | font-size: 0.9em; 31 | font-weight: 300; 32 | } 33 | @media (max-width: 50em) { 34 | #wipcontainer { 35 | margin: 0 0 0 0; 36 | left:0; 37 | width: auto; 38 | } 39 | #wip { 40 | padding: 1em 4em 1.5em 4em; 41 | width: auto; 42 | } 43 | } 44 | #wip strong { 45 | font-weight: normal; 46 | display: block; 47 | text-transform: uppercase; 48 | text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6); 49 | margin: 0.25em auto 0.5em auto; 50 | } 51 | #wip a { 52 | color: #fff; 53 | } 54 | #wip a:hover { 55 | background: transparent; 56 | } 57 | #wip strong:before, #wip strong:after { 58 | position: relative; 59 | content:'\26A0'; 60 | padding: 0 0.5em 0 0.5em; 61 | text-shadow: none; 62 | font-size: 1.25em; 63 | } 64 | #wip > input { 65 | position: absolute; 66 | right: 5px; 67 | top: 5px; 68 | background: none; 69 | border: none; 70 | color: rgb(243, 245, 246); 71 | font-weight: bold; 72 | font-size: 1.2em; 73 | cursor: pointer; 74 | border: thin solid rgba(127, 127, 127, .0); 75 | border-radius: .3em; 76 | } 77 | #wip > input:hover { 78 | border: thin outset rgba(127, 127, 127, .5); 79 | } 80 | #wip > input:active { 81 | border: thin inset rgba(127, 127, 127, .5); 82 | } 83 | -------------------------------------------------------------------------------- /publish/shadow/WD-shadow-dom-20140619/working-draft.js: -------------------------------------------------------------------------------- 1 | function hideWIP(elem){ 2 | elem.parentNode.parentNode.id = ''; 3 | elem.parentNode.id = ''; 4 | elem.style.display = 'none'; 5 | } 6 | -------------------------------------------------------------------------------- /publish/template/WD-html-templates-20130214/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/template/WD-html-templates-20130214/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | background-color: red; 49 | color: white; 50 | } 51 | 52 | dfn { 53 | font-style: normal; 54 | background-color: #f9f9f9; 55 | padding: 0 2px; 56 | border: 1px solid #eee; 57 | } 58 | 59 | dfn:target { 60 | background-color: #FFFF91; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | border-bottom: 1px solid #666; 66 | } 67 | 68 | a[href*=dfn-] { 69 | border-bottom: 1px dotted #ccc; 70 | } 71 | 72 | div.logo>a { 73 | border-bottom: none; 74 | } 75 | 76 | var { 77 | font-size: 0.8em; 78 | color: #005A9C; 79 | font-style: normal; 80 | } 81 | 82 | table { 83 | border: 1px solid #ccc; 84 | } 85 | 86 | table code { 87 | background-color: transparent; 88 | } 89 | 90 | td, th { 91 | padding: 0.5em; 92 | vertical-align: top; 93 | } 94 | 95 | td { 96 | border-bottom: 1px solid #ddd; 97 | } 98 | 99 | tr:last-of-type td { 100 | border-bottom: none; 101 | } 102 | 103 | th { 104 | text-align: left; 105 | background-color: #eee; 106 | } 107 | 108 | dt { 109 | font-weight: bold; 110 | } 111 | 112 | dd { 113 | padding-bottom: 7px; 114 | } 115 | 116 | div.algorithm { 117 | padding: 0 0 0 20px; 118 | border-left: 5px solid #EAF7F9; 119 | } 120 | -------------------------------------------------------------------------------- /publish/template/WD-html-templates-20130328/prettify.css: -------------------------------------------------------------------------------- 1 | .pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee} -------------------------------------------------------------------------------- /publish/template/WD-html-templates-20130328/spec.css: -------------------------------------------------------------------------------- 1 | body { 2 | line-height: 1.4em; 3 | } 4 | 5 | code { 6 | background-color: #eee; 7 | font-family: 'Droid Sans Mono', monospace; 8 | } 9 | 10 | body>pre.prettyprint, body>section pre { 11 | background-color: #eee; 12 | padding: 0 2em 1em 2em; 13 | margin: 0; 14 | border: none; 15 | } 16 | 17 | object { 18 | margin: 0 auto; 19 | display: block; 20 | } 21 | 22 | section.toc ol { 23 | list-style: none; 24 | } 25 | 26 | span.shadow-boundary { 27 | color: Gray; 28 | } 29 | 30 | span.event-ancestor, span.first-divergent-boundary { 31 | color: DarkRed; 32 | } 33 | 34 | span.event-ancestor > em { 35 | background-color: DarkRed; 36 | color: White; 37 | font-style: normal; 38 | border-radius: 1em; 39 | padding: 0 0.35em; 40 | } 41 | 42 | span.lowest-common-boundary { 43 | color: Green; 44 | } 45 | 46 | 47 | .fixme { 48 | background-color: red; 49 | color: white; 50 | } 51 | 52 | dfn { 53 | font-style: normal; 54 | background-color: #f9f9f9; 55 | padding: 0 2px; 56 | border: 1px solid #eee; 57 | } 58 | 59 | dfn:target { 60 | background-color: #FFFF91; 61 | } 62 | 63 | a { 64 | text-decoration: none; 65 | border-bottom: 1px solid #666; 66 | } 67 | 68 | a[href*=dfn-] { 69 | border-bottom: 1px dotted #ccc; 70 | } 71 | 72 | div.logo>a { 73 | border-bottom: none; 74 | } 75 | 76 | var { 77 | font-size: 0.8em; 78 | color: #005A9C; 79 | font-style: normal; 80 | } 81 | 82 | table { 83 | border: 1px solid #ccc; 84 | } 85 | 86 | table code { 87 | background-color: transparent; 88 | } 89 | 90 | td, th { 91 | padding: 0.5em; 92 | vertical-align: top; 93 | } 94 | 95 | td { 96 | border-bottom: 1px solid #ddd; 97 | } 98 | 99 | tr:last-of-type td { 100 | border-bottom: none; 101 | } 102 | 103 | th { 104 | text-align: left; 105 | background-color: #eee; 106 | } 107 | 108 | dt { 109 | font-weight: bold; 110 | } 111 | 112 | dd { 113 | padding-bottom: 7px; 114 | } 115 | 116 | div.algorithm { 117 | padding: 0 0 0 20px; 118 | border-left: 5px solid #EAF7F9; 119 | } 120 | -------------------------------------------------------------------------------- /samples/contacts-widget.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Contacts Widget: Shadow DOM Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 23 |

    Contacts Widget

    24 |
    25 |

    Rajesh is sad. It's the third time this month that he had to fix the continuous build of their company's flagship product, the Socia1eet, and all for the same reason: the spurious tweaking of the contacts widget. It certainly appears that some of his coworkers are unable to learn a simple rule: don't change the DOM of the contacts widget outside of the widget's code.

    26 |

    Never mind the unit tests. Never mind constant nagging. Whenever Rajesh, whether fixing a bug or adding a feature, pushes an update for the widget, things break. Last time it was Howard, who—in his theming code—thought he could add an extra class on each userpic in the widget. Before then it was Amy, who decided to grab contents of a label in the widget by traversing DOM (!) in the initialization code (!!). Whosoever it is, touching the widget DOM structure is somewhat like opening a box of chocolate. Except instead of chocolate, it's landmines, remarks Rajesh bitterly. Tiny, chocolate-covered landmines.

    27 |

    … And then he remembers reading something about the Shadow DOM, the Web platform capability that enables functional encapsulation. Rajesh races forward with the idea. He realizes that, in fact, his widget is really a self-contained unit of DOM, and treating it as a single element would be a much saner point of view for his colleagues. Moreover, since only the widget code can construct this unit of DOM, making changes to the widget's structure would require them to be done from the widget code. This is going to be fun, thinks Raj.

    28 |

    The current code in /src/ui/widgets/contacts.js looks like this (some parts skipped for clarity):

    29 | 30 | 
    
 31 | var ui = ui || {};
 32 | ui.widgets = ui.widgets || {};
 33 | 
 34 | (function() {
 35 |     var MAX_USERS = 8;
 36 | 
 37 |     function Contacts()
 38 |     {
 39 |         this.element = document.createElement('div');
 40 |         this.element.className = 'contacts widget';
 41 |         var users = this.element.appendChild(document.createElement('ul'));
 42 |         this.loadUsers(MAX_USERS, function(user) {
 43 |             var li = document.createElement('li');
 44 |             // Populate [li] with data from the [user] object.
 45 |             // …
 46 |         });
 47 |     }
 48 | 
 49 |     // …
 50 | 
 51 |     // Asynchronously loads users from server and invokes [callback] for each user loaded
 52 |     Contacts.prototype.loadUsers = function(userCount, callback)
 53 |     {
 54 |         // …
 55 |     }
 56 | 
 57 |     // …
 58 | 
 59 |     ui.widgets.Contacts = Contacts;
 60 | 
 61 | })();
 62 |
    63 | 64 |

    At runtime, the widget is instantiated as new ui.widgets.Contacts(), and produces the following DOM structure, shown here as HTML markup: 65 | 66 | 

    
 67 | <div class="contacts widget">
 68 |     <ul>
 69 |         <li>…</li>
 70 |         …
 71 |     </ul>
 72 | </div>
 73 |
    74 | 75 |

    What Rajesh wants is a clear line between the <div class="contacts widget"> and the <ul>, which stops Amys and Howards from mucking with the enclosed structure outside of /src/ui/widgets/contacts.js:

    76 | 77 | 
    
 78 | <div class="contacts widget">
 79 |     <#they-shall-not-pass>
 80 |         <ul>
 81 |             <li>…</li>
 82 |             …
 83 |         </ul>
 84 |     <#they-shall-not-pass>
 85 | </div>
 86 |
    87 | 88 |

    Here, Rajesh recognizes a near-perfect description of the shadow DOM subtree. So, all I need to do is create a ShadowRoot with this.element as its host and append UI elements to it, instead of this.element, he summarizes, fingers dancing on the keyboard. The actual change is just a handful of characters:

    89 | 90 | 
    
 91 | 
 92 | function Contacts()
 93 | {
 94 |     this.element = document.createElement('div');
 95 |     this.element.className = 'contacts widget';
 96 |     var shadow = new ShadowRoot(this.element);
 97 |     var users = this.elementshadow.appendChild(document.createElement('ul'));
 98 |     this.loadUsers(MAX_USERS, function(user) {
 99 |         var li = document.createElement('li');
100 |         // Populate [li] with data from the [user] object.
101 |         // …
102 |     });
103 | }
104 |
    105 | 106 |

    To keep theme engine's stylesheets working, Raj flips the applyAuthorStyles flag, thus letting the document stylesheets apply in the shadow DOM:

    107 | 108 | 
    
109 | 
110 |     this.element.className = 'contacts widget';
111 |     var shadow = new ShadowRoot(this.element);
112 |     shadow.applyAuthorStyles = true;
113 |     var users = shadow.appendChild(document.createElement('ul'));
114 | 
115 |
    116 | 117 |

    Checking the DOM tree reveals that now the contacts widget looks and acts as a single DOM element in a document tree:

    118 | 119 | 
    
120 | <div class="contacts widget"></div>
121 |
    122 | 123 |

    The widget UI code is safely tucked away in a shadow DOM subtree, making it brittle no more. You can create and add the widget to the document, you can move it around, but to make changes to widget DOM structure, you have to make them in /src/ui/widgets/contacts.js. And, thanks to the new code owners management tooling, any code changes to that file will need Raj's nod before landing.

    124 | 125 |

    Sensing undeniable win, Rajesh decides to join his friends for dinner. It's Pizza Thursday, and nothing punctuates a win better than a slice of italian pie.

    126 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /samples/entry-helper.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Components Examples: Entry Helper 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 23 |

    Web Components Example

    24 |

    Entry Helper

    25 |
    26 | 
    
 27 | <element extends="input" name="x-entry-helper">
 28 |     <script>
 29 |         this.lifecycle({
 30 |             create: function(shadowRoot) {
 31 |                 if (this.type != 'text')
 32 |                     return;
 33 |                 this._options = shadowRoot.querySelector('ul');
 34 |                 this.setAttribute('autocomplete', 'off');
 35 |                 document.addEventListemer('keydown', this._handleKeyDownEvent);
 36 |                 document.addEventListener('mouseup', this._handleMouseUpEvent);
 37 |             }
 38 |         });
 39 | 
 40 |         var Helper = this.generatedConstructor;
 41 |         Helper.prototype._handleKeyDownEvent = function(evt)
 42 |         {
 43 |             if (evt.currentTarget.parentNode == this._options) {
 44 |                 this._selectOption(evt.currentTarget);
 45 |             } else if (evt.currentTarget == this) {
 46 |                 if (!this._open)
 47 |                     this.open();
 48 |                 this.populate();
 49 |             // ...
 50 |             } else {
 51 |                 this.close();
 52 |             }
 53 |         }
 54 | 
 55 |         Helper.prototype._handleMouseUpEvent = function(evt)
 56 |         {
 57 |             if (evt.currentTarget == this) {
 58 |             // ...
 59 |             } else {
 60 |                 this.close();
 61 |             }
 62 |         }
 63 | 
 64 |         Helper.prototype._settingsChanged = function()
 65 |         {
 66 |             if (!this._open)
 67 |                 return;
 68 | 
 69 |             this.populate();
 70 |         }
 71 | 
 72 |         Helper.prototype.clear = function()
 73 |         {
 74 |             // clear helper window's contents.
 75 |         }
 76 | 
 77 |         Helper.prototype.populate = function()
 78 |         {
 79 |             this.clear();
 80 |             // populate helper window using current settings.
 81 |         }
 82 | 
 83 |         Helper.prototype.open = function()
 84 |         {
 85 |             if (this._open)
 86 |                 return;
 87 |             else
 88 |                 this._options.style.display = '';
 89 | 
 90 |             // Show entry helper window and attempt completion match.
 91 |             // ..
 92 | 
 93 |             this._open = true;
 94 |             this.dispatchEvent(new Event('helperopen'));
 95 |         }
 96 | 
 97 |         Helper.prototype.close = function()
 98 |         {
 99 |             // close entry helper.
100 |         }
101 | 
102 |         this.reflectAttribute('x-highlight-matches', 'highlightMatches', Helper.prototype._settingsChanged);
103 |         this.reflectAttribute('list', 'list', Helper.prototype._settingsChanged);
104 |         this.setupEvent('helperopen');
105 |     </script>
106 |     <template>
107 |         <style scoped>
108 |             ul {
109 |                 width: 200px;
110 |                 height: 200px;
111 |                 position: absolute;
112 |                 /* ... */
113 |             }
114 |             /* ... */
115 |         </style>
116 |         <div>
117 |             <shadow></shadow>
118 |             <ul></ul>
119 |         </div>
120 |     </template>
121 | </element>
122 |
    123 | 124 | -------------------------------------------------------------------------------- /samples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Components Examples 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 22 |

    Web Components Examples

    23 |
    24 |

    This is a collection of code samples for Web Components.

    25 | 26 |

    Component Model Use Case Implementations

    27 | 28 |

    Here are the Component Model Use Cases, implemented using Web Components:

    29 | 35 | 36 |

    Shadow DOM Code Samples

    37 | 38 |

    It all begins with a basic recipe for making a well-encapsulated Contacts Widget.

    39 | 40 |

    A more advanced recipe shows how CSS Variables could be used to attenuate styling of shadow DOM for things like theming.

    41 | 42 |

    The DOM replay extension example/recipe illustrates a technique that can be used to inject new user interface into an existing document without disturbing document's structure.

    43 | 44 |

    There's a fairly involved example in the Shadow DOM specification.

    45 | 46 | 47 | -------------------------------------------------------------------------------- /samples/replay-extension.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Replay Extension: Shadow DOM Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 23 |

    DOM Replay Extension

    24 |
    25 |

    Suppose we want to build a browser extension that monitors all DOM modifications using the new mutation observers hotness, records them, and then allows the user to undo and re-apply all changes interactively.

    26 | 27 |

    When the extension is active on a page, there is a slider at the top of the page and, next to it, a couple of buttons to start, reset, stop recording mutation events. The slider represents the timeline of all DOM changes on the page. The user can use the slider to move about the timeline. 28 | 29 |

    We'll leave the logistics of hooking up the listening, queueing and then manipulation of the mutation queue as an exercise to the reader, but take the user interface of the extension as the challenge for this example. To keep the document structure untouched, we are going to use shadow DOM to render extension controls as a DOM subtree that's not part of the document. Creating this subtree is easy:

    30 | 31 | 
    
32 | var root = new ShadowRoot(document.body);
33 | var controls = buildUIControls();
34 | root.appendChild(controls);
35 |
    36 | 37 |

    Note that we now created a shadow root with document's body as the shadow host. Well, that doesn't seem right... As specified, all content of the body element is replaced with the contents of the shadow root. Instead of content, we now have just the extension controls showing up on the page.

    38 | 39 |

    What we need is an insertion point for the body's children, which indicates their new location inside of the shadow DOM subtree. The children will still stay in their usual places in DOM, but when rendering, they will be magically teleported and shown in place of that insertion point. A logical place for this magical location is at the bottom of controls, and content element represents the insertion point:

    40 | 41 | 
    
42 | var root = new ShadowRoot(document.body);
43 | var controls = buildUIControls();
44 | root.appendChild(controls);
45 | root.appendChild(document.createElement('content'));
46 |
    47 | 48 |

    Mission accomplished! The browser will now display a document with a set of controls at the top.

    49 | 50 |

    This technique is not only useful for extensions. Shadow DOM provides a pretty easy way to add chunks of DOM to a document DOM tree out of band. Use this recipe whenever the document structure is difficult to change, either due to syndication constraints, legacy code, or stubborn colleagues. Okay, maybe not the last one.

    51 | 52 | 53 | -------------------------------------------------------------------------------- /samples/table-chart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Components Example: Table-based Charts 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 23 |

    Web Components Example

    24 |

    Table-based Charts

    25 |
    26 | 
    
27 | <element extends="table" name="x-table-chart" constructor="TableChart">
28 |     <script>
29 | 
30 |         this.lifecycle({
31 |             created: function(shadowRoot) {
32 |                 this._canvas = shadowRoot.firstElementChild;
33 |                 this.draw();
34 |             },
35 |             inserted: function() { this._visible = true; },
36 |             removed: function() { this._visible = false; }
37 |         });
38 | 
39 |         TableChart.prototype.draw = function()
40 |         {
41 |             if (!this._visible)
42 |                 return;
43 | 
44 |             var type = this.chartType;
45 |             var color = this.chartColor;
46 |             var canvas = this._canvas;
47 | 
48 |             // Read the table data and draw the graph on canvas.
49 |             // ...
50 | 
51 |             this.dispatchEvent(new Event('draw'));
52 |         }
53 | 
54 |         this.reflectAttribute('x-chart-type', 'chartType', TableChart.prototype.draw);
55 |         this.reflectAttribute('x-chart-color', 'chartColor', TableChart.prototype.draw);
56 |         this.setupEvent('draw');
57 | 
58 |     </script>
59 |     <template>
60 |         <canvas></canvas>
61 |     </template>
62 | </element>
63 |
    64 | 65 | -------------------------------------------------------------------------------- /samples/timezone-map-custom-element.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Components Example: Timezone Selection via Image 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 23 |

    Web Components Example

    24 |

    Timezone Selection via Image

    25 |
    26 | 
    
27 | <element extends="select" name="x-timezone-map" constructor="MapSelector">
28 |     <script>
29 |         this.lifecycle({
30 |             created: function(shadowRoot) {
31 |                 select = shadowRoot.shadowHost;
32 |                 shadowRoot.querySelector('#timezoneShapes').addEventHandler('click', function() {
33 |                     if (event.target != this) {
34 |                         select.selectedIndex = select[event.target.id].index;
35 |                         // FIXME: Highlight the timezone.
36 |                     }
37 |                 });
38 |                 // FIXME: Add "change" listener to adjust currently highlighted timezone.
39 |             }
40 |         });
41 |     </script>
42 |     <template>
43 |         <svg>
44 |             <g id="worldShapes"> ... </g>
45 |             <g id="timezoneShapes">
46 |                 <path id="PST" ...>
47 |                 <path id="CST" ...>
48 |             </g>
49 |             ...
50 |         </svg>
51 |     </template>
52 | </element>
53 |
    54 | 55 | -------------------------------------------------------------------------------- /samples/timezone-map-decorator.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Web Components Example: Timezone Selection via Image (decorator) 5 | 6 | 7 | 8 | 9 | 10 | 11 |

    Web Components Example

    12 |

    Timezone Selection via Image

    13 |

    Using decorator.

    14 | 
    
15 | <decorator id="timezone-map">
16 |     <script>
17 |         var timezones = ['pst', ... ];
18 | 
19 |         function createHandler(timezone)
20 |         {
21 |             this.listen({
22 |                 selector: '#' + timezone,
23 |                 type: 'click',
24 |                 handler: function() {
25 |                     // Decorators are late-bound, so we must check for type.
26 |                     if (this instanceof HTMLSelectElement)
27 |                         this.selectedIndex = this[timezone].index;
28 |                 }
29 |             });
30 |         }
31 | 
32 |         timezones.forEach(createHandler, this);
33 |     </script>
34 |     <template>
35 |         <svg ...>
36 |             <g id="worldShapes"> ... </g>
37 |             <g id="timezoneShapes">
38 |                 <path id="PST" ...>
39 |                 <path id="CST" ...>
40 |             </g>
41 |             ...
42 |         </svg>
43 |     </template>
44 | </decorator>
45 |
    46 | 47 | -------------------------------------------------------------------------------- /samples/widget-theming.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Widget Theming: Shadow DOM Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 | 23 |

    Widget Theming

    24 |
    25 | 26 |

    After Raj's discovery of Shadow DOM triggered company-wide conversion to properly incapsulated widgets, Howard—not to be outdone—gleans another great opportunity in this change. He realizes that with the help of scoped stylesheets and shadow DOM, he can separate the general framing of the widgets from the theming code. For years now, it's been bugging him that whenever the widget's author wanted to tweak the general layout of their widgets, they would have edit the /src/ui/layout/widgets.css stylesheet and muck with their gubbins of code there, creating a waterfall of lines that looks like this:

    27 | 

    
 28 | 
 29 | /* General Widget properties */
 30 | 
 31 | .widget { … }
 32 | 
 33 | /* Contacts Widget layout. All rules must start with .contacts.widget  */
 34 | 
 35 | .contacts.widget ul {
 36 |     margin: 0;
 37 |     list-style: none;
 38 |     …
 39 | }
 40 | 
 41 | .contacts.widget ul li { … }
 42 | 
 43 | .contacts.widget ul li img.photo { … }
 44 | 
 45 | .contacts.widget ul li span.n { … }
 46 | 
 47 | …
 48 | 
 49 | /* Activity Stream Widget layout. All rules must start with .activity.widget */
 50 | 
 51 | .activity.widget ul { … }
 52 | 
 53 | .activity.widget li { … }
 54 | 
 55 | .activity.widget li.shared { … }
 56 | 
 57 | …
 58 | 
 59 |
    60 | 61 |

    Then, a separate stylesheet in the /src/ui/themes/ directory is used to apply colors, backgrounds, and all those wonderful barnacles that typically comprise a theme. Despite strictly enforced naming conventions, the structure is somewhat brittle and, on occasion, one rule clobbers another, subtly breaking the beautiful house of cards, causing users grief—and throwing Howard into panic mode. Panic mode gets old quickly.

    62 | 63 |

    Moving widget layout styles to scoped stylesheets next to respective widgets goes a long way to make layout less brittle. Further, putting these scoped styles inside each widget's shadow DOM subtree ensures that the these styles are contained to the widgets. Sure, it's a bit of a refactoring, but that beats arguing with mom. Howard goes to work. An hour later, the /src/ui/layout/widgets.css stylesheet is drained and all widgets look like this (/src/ui/widgets/contacts.js, for example):

    64 | 65 | 
    
 66 | var ui = ui || {};
 67 | ui.widgets = ui.widgets || {};
 68 | 
 69 | (function() {
 70 |     var MAX_USERS = 8;
 71 | 
 72 |     function Contacts()
 73 |     {
 74 |         this.element = document.createElement('div');
 75 |         this.element.className = 'contacts widget';
 76 |         var shadow = new ShadowRoot(this.element);
 77 |         shadow.applyAuthorStyles = true;
 78 |         var style = document.createElement('style');
 79 |         style.scoped = true;
 80 |         style.textContent = this.scopedStyleText;
 81 |         shadow.appendChild(style);
 82 |         var users = shadow.appendChild(document.createElement('ul'));
 83 |         this.loadUsers(MAX_USERS, function(user) {
 84 |             var li = document.createElement('li');
 85 |             // Populate [li] with data from the [user] object.
 86 |             // …
 87 |         });
 88 |     }
 89 | 
 90 |     // …
 91 | 
 92 |     // Styles moved from /src/ui/layout/widgets.css, minus ".contacts.widget" selector.
 93 |     // Quasi-literals are awesome! (http://wiki.ecmascript.org/doku.php?id=harmony:quasis)
 94 |     Contacts.prototype.scopedStyleText = `ul {
 95 |         margin: 0;
 96 |         list-style: none;
 97 |         …
 98 |         }
 99 |         ul li { … }
100 |         ul li img.photo { … }
101 |         ul li span.n { … }
102 |         …`;
103 | 
104 |     // …
105 | 
106 |     ui.widgets.Contacts = Contacts;
107 | 
108 | })();
109 |
    110 | 111 |

    Whoa!—Howard sees another way to improve robustness of the layout system. The applyAuthorStyles flag (which is false by default) controls whether document stylesheets apply in the shadow DOM subtrees. Thus removing a line of code ensures that the widget's styles are never messed with:

    112 | 113 | 
    
114 | this.element.className = 'contacts widget';
115 | var shadow = new ShadowRoot(this.element);
116 | shadow.applyAuthorStyles = true;
117 | var users = shadow.appendChild(document.createElement('ul'));
118 |
    119 | 120 |

    The celebration is cut short as Howard notices that the stylesheets from /src/ui/themes/ directory were also part of the document stylesheet. As it stands, there is no way to apply theming styles to the widgets…

    121 | 122 |

    Or maybe there is. CSS Variables to the rescue! Upon reading the spec, Howard does a little dance. Not only they allow widget theming, the method is such that you can specify precise and named points where theming is allowed. Digging into the Contacts widget, Howard documents the following theming points:

    123 | 128 |

    Howard mixes the variables into the scopedStyleText string:

    129 | 130 | 
    
131 | // Styles moved from /src/ui/layout/widgets.css, minus ".contacts.widget" selector.
132 | // Quasi-literals are awesome! (http://wiki.ecmascript.org/doku.php?id=harmony:quasis)
133 | Contacts.prototype.scopedStyleText = `ul {
134 |     margin: 0;
135 |     list-style: none;
136 |     font: data(font);
137 |     color: data(color);
138 |     background: data(background);
139 |     …
140 |     }
141 |     ul li {  … }
142 |     ul li img.photo {
143 |     border: 1px solid data(color);
144 |     …';
145 | 
146 |
    147 | 148 |

    Now to tweak the actual themes, starting with /src/ui/themes/purple-and-black.css:

    149 | 150 | 
    
151 | 
152 | …
153 | 
154 | /* Contacts Widget Theme  */
155 | 
156 | .contacts.widget ul {
157 |     color: black;
158 |     background: purple;
159 | }
160 | 
161 | .contacts.widget ul li img.photo {
162 |     border-color: black;
163 | }
164 | 
165 | .contacts.widget {
166 |     data-color: black;
167 |     data-background: purple;
168 | }
169 | 
170 | …
171 | 
172 |
    173 | 174 |

    Whoohoo! No more reaching into widgets to style them! No more breakages when widget authors change their widgets and forget to update the theme! After all themes are converted, the Socia1eet looks and works same as before. But on the inside, the brittle layout and theming system has been replaced with a flexible, elegant, and robust solution.

    175 | 176 | 177 | 178 | -------------------------------------------------------------------------------- /spec/shadow/autolink-config.js: -------------------------------------------------------------------------------- 1 | var autolinkConfig = { 2 | 3 | 'http://dom.spec.whatwg.org/': { 4 | 'AT_TARGET': '#dom-event-at_target', 5 | 'DATA_CLONE_ERR': '#dom-domexception-data_clone_err', 6 | 'DOCUMENT_FRAGMENT_NODE': '#dom-node-document_fragment_node', 7 | 'InvalidNodeTypeError': '#invalidnodetypeerror', 8 | 'NodeList': '#nodelist', 9 | 'ancestor': '#concept-tree-ancestor', 10 | 'bubbles': '#dom-event-bubbles', 11 | 'child': '#concept-tree-child', 12 | 'cloneNode()': '#dom-node-clonenode', 13 | 'context object': '#context-object', 14 | 'currentTarget': '#dom-event-currenttarget', 15 | 'descendant': '#concept-tree-descendant', 16 | 'document': '#concept-document', 17 | 'document element': '#document-element', 18 | 'element': '#concept-element', 19 | 'event dispatch': '#concept-event-dispatch', 20 | 'event listener invoke': '#concept-event-listener-invoke', 21 | 'event listener': '#concept-event-listener', 22 | 'event': '#events', 23 | 'eventPhase': '#dom-event-eventphase', 24 | 'getElementById': '#dom-nonelementparentnode-getelementbyid', 25 | 'inclusive ancestor': '#concept-tree-inclusive-ancestor', 26 | 'interface Document': '#interface-document', 27 | 'interface DocumentFragment': '#interface-documentfragment', 28 | 'node tree': '#concept-node-tree', 29 | 'node': '#concept-node', 30 | 'nodeName': '#dom-node-nodename', 31 | 'nodeType': '#dom-node-nodetype', 32 | 'ownerDocument': '#dom-node-ownerdocument', 33 | 'parent': '#concept-tree-parent', 34 | 'participate': '#concept-tree-participate', 35 | 'participates': '#concept-tree-participate', 36 | 'preceding': '#concept-tree-preceding', 37 | 'range': '#range', 38 | 'replace all': '#concept-node-replace-all', 39 | 'root': '#concept-tree-root', 40 | 'static': '#concept-collection-static', 41 | 'stop propagation flag': '#stop-propagation-flag', 42 | 'target': '#dom-event-target', 43 | 'tree order': '#concept-tree-order', 44 | 'tree': '#trees' 45 | }, 46 | 47 | 'http://www.whatwg.org/specs/web-apps/current-work/multipage/': { 48 | 'DOM tree accessors': 'dom.html#dom-tree-accessors', 49 | 'Document object': 'dom.html#document', 50 | 'Global attributes': 'elements.html#global-attributes', 51 | 'HTML': '', 52 | 'HTML elements': 'semantics.html#semantics', 53 | 'HTML fragment serialization algorithm': 'the-end.html#html-fragment-serialization-algorithm', 54 | 'HTMLUnknownElement': 'elements.html#htmlunknownelement', 55 | 'activeElement': 'editing.html#dom-document-activeelement', 56 | 'audio element': 'the-video-element.html#the-audio-element', 57 | 'base element': 'semantics.html#the-base-element', 58 | 'being rendered': 'rendering.html#being-rendered', 59 | 'boolean': 'common-microsyntaxes.html#boolean-attribute', 60 | 'canvas element': 'the-canvas-element.html#the-canvas-element', 61 | 'comma separated tokens': 'common-microsyntaxes.html#comma-separated-tokens', 62 | 'contenteditable': 'editing.html#attr-contenteditable', 63 | 'details element': 'interactive-elements.html#the-details-element', 64 | 'embed element': 'the-iframe-element.html#the-embed-element', 65 | 'fallback content': 'elements.html#fallback-content', 66 | 'fieldset element': 'the-button-element.html#the-fieldset-element', 67 | 'flow content': 'dom.html#flow-content', 68 | 'focusable': 'editing.html#focusable-area', 69 | 'form element': 'forms.html#the-form-element', 70 | 'form submission': 'association-of-controls-and-forms.html#form-submission', 71 | 'form-associated element': 'forms.html#form-associated-element', 72 | 'forms': 'forms.html#forms', 73 | 'iframe element': 'the-iframe-element.html#the-iframe-element', 74 | 'in a document': 'infrastructure.html#dom-trees:in-a-document#in-a-document', 75 | 'inert': 'interaction.html#inert', 76 | 'img element': 'edits.html#the-img-element', 77 | 'input element': 'the-input-element.html#the-input-element', 78 | 'link element': 'semantics.html#the-link-element', 79 | 'map element': 'the-map-element.html#the-map-element', 80 | 'meter element': 'the-button-element.html#the-meter-element', 81 | 'named access on the window object': 'browsers.html#named-access-on-the-window-object', 82 | 'object element': 'the-iframe-element.html#the-object-element', 83 | 'progress element': 'the-button-element.html#the-progress-element', 84 | 'reflect': 'common-dom-interfaces.html#reflect', 85 | 'style': 'elements.html#the-style-attribute', 86 | 'textarea element': 'the-button-element.html#the-textarea-element', 87 | 'transparent': 'elements.html#transparent', 88 | 'tree accessors': 'dom.html#dom-tree-accessors', 89 | 'video element': 'the-video-element.html#the-video-element', 90 | 'window': 'browsers.html#window' 91 | }, 92 | 93 | 'http://dev.w3.org/csswg/selectors4/': { 94 | 'attribute selector': '#attribute-selector', 95 | 'class selector': '#class-selector', 96 | 'compound selector': '#compound', 97 | 'descendant combinators': '#descendant-combinators', 98 | 'id selector': '#id-selector', 99 | 'negation pseudo-class': '#negation', 100 | 'reference element set': '#reference-element-set', 101 | 'relative selector': '#relative-selectors', 102 | 'scope contained selectors': '#scope-contained-selectors', 103 | 'scoped selectors': '#scope', 104 | 'selectors': '', 105 | 'simple selector': '#simple', 106 | 'type selector': '#type-selector', 107 | 'universal selector': '#universal-selector' 108 | }, 109 | 110 | 'http://www.w3.org/TR/DOM-Level-3-Events/': { 111 | 'MouseEvent': '#interface-MouseEvent', 112 | 'mutation event': '#interface-MutationEvent', 113 | 'relatedTarget': '#widl-MouseEvent-relatedTarget', 114 | 'trusted events': '#trusted-events' 115 | }, 116 | 117 | 'http://www.w3.org/TR/touch-events/': { 118 | 'Touch target': '#widl-Touch-target', 119 | 'Touch': '#touch-interface', 120 | 'TouchEvent': '#touchevent-interface', 121 | 'TouchList': '#touchlist-interface', 122 | 'changedTouches': '#widl-TouchEvent-changedTouches', 123 | 'targetTouches': '#widl-TouchEvent-targetTouches', 124 | 'touches': '#widl-TouchEvent-touches' 125 | }, 126 | 127 | 'http://www.w3.org/TR/CSS21/': { 128 | 'CSS rules': 'syndata.html#rule-sets', 129 | 'inheritance': 'cascade.html#inheritance', 130 | 'box': 'box.html', 131 | 'formating structure': 'intro.html#formatting-structure', 132 | 'text-decoration': 'text.html#lining-striking-props' 133 | }, 134 | 135 | 'http://www.w3.org/TR/css3-ui/': { 136 | 'directional focus navigation': '#nav-dir', 137 | 'nav-index auto': '#nav-index', 138 | 'navigation order': '#keyboard', 139 | 'sequential focus navigation': '#keyboard' 140 | }, 141 | 142 | 'http://www.w3.org/TR/css3-cascade/': { 143 | 'author stylesr': '', 144 | 'cascade order': '#cascade', 145 | 'inheritance': '#inheritance', 146 | 'initial values': '#inital-values' 147 | }, 148 | 149 | 'http://www.w3.org/TR/css-variables/': { 150 | 'CSS variables': '', 151 | 'var()': '#using-variables' 152 | }, 153 | 154 | 'http://www.w3.org/TR/cssom/': { 155 | 'style sheet': '#style-sheet', 156 | 'StyleSheetList': '#the-stylesheetlist-interface' 157 | }, 158 | 159 | 'http://www.w3.org/TR/cssom-view/': { 160 | 'offsetx': '#dom-mouseevent-offsetx', 161 | 'offsety': '#dom-mouseevent-offsety', 162 | 'caretPositionFromPoint': '#dom-document-caretpositionfrompoint', 163 | 'padding edge': '#padding-edge', 164 | 'viewport': '#viewport' 165 | }, 166 | 167 | 'https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html': { 168 | 'selection': '#concept-selection', 169 | 'window.getSelection()': '#dom-window-getselection', 170 | 'padding edge': '#padding-edge', 171 | 'viewport': '#viewport' 172 | }, 173 | 174 | 'http://domparsing.spec.whatwg.org/': { 175 | 'parse fragment': '#concept-parse-fragment' 176 | } 177 | 178 | }; 179 | --------------------------------------------------------------------------------