``` ```Click me
35 | ```
36 |
37 | ## Proposal
38 |
39 | Add a new property `matchFocusBehaviorOf` to `ElementInternals`, which accepts a string containing a tagname and optionally an attribute with a value (so it will accept values like `div`, `a[href]`, `input[type='checkbox']` , but not `.class`, `*`, etc.). The custom element will then be treated as if it has that tagname and attribute in terms of focus.
40 |
41 | ## Alternatives considered
42 |
43 | ### Using other ways to represent the built-in elements
44 |
45 | The proposed API above uses a CSS selectors to represent the built-in elements, but we’ve also considered some variants:
46 |
47 | - Using “tagname + one attribute name + attribute’s value” combination,
48 | e.g. `elementInternals.matchFocusBehaviorOf("input", "type", "button")`
49 |
50 | - Using a predefined list of items representing the built-in elements.
51 | The list would include all html tag names, `a[href]`,
52 | `input[type=X]`, and any other special cases for elements whose focusability changes in interesting ways based on attributes.
53 |
54 | - Using an element instance to follow, e.g. `elementInternals.matchFocusBehaviorOf = buttonElement;`
55 |
56 | All of the alternative API shapes below can be considered to replace the currently proposed API.
57 |
58 | ### Follow focus behavior from an enumerated list of high-level concepts (e.g. `"text entry"`, `"clickable"`, etc.)
59 |
60 | Instead of following a certain tagname, we would instead follow a certain “high level” concept that covers all the built-in elements, so the enum list would be like like “option”, “button”, “text entry”, etc.
61 |
62 | Although this approach would be more descriptive, it might get out of date when a new way of focusing is added to the platform or other conventions change.
63 |
64 | ### Allow setting default tabindex values
65 |
66 | One simple way to allow default focusability is to just add an `ElementInternals` version of `tabindex` so that even after being overridden by the custom element user, the default value can still be restored later.
67 |
68 | However, this means the custom element can’t exactly emulate the behavior of built-in elements that are skipped/not focusable in certain conditions depending on preferences, etc. For example, if someone wants to make a new awesome-checkbox element, they would probably want to follow the behavior of `2011-12-20 21:33Z Canvas 1 Trees Shadow Tree Nodes shadow host shadow root child shadow root child T ree as Rendered ... 2011-12-20 21:33Z Canvas 1 Trees Shadow DOM Subtree Nodes shadow host shadow root child shadow root child T ree as Rendered ... 2011-12-20 21:33Z Canvas 1 Trees Shadow DOM Subtree Nodes shadow host shadow root child shadow root child T ree as Rendered ... 2011-12-20 21:33Z Canvas 1 Trees Shadow DOM Subtree Nodes shadow host shadow root child shadow root child T ree as Rendered ...
2 |
3 |
4 |
6 |
7 |
8 |
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:33Z Canvas 1 Trees Shadow Tree Nodes shadow host shadow root child shadow root child T ree as Rendered ...
2 |
3 |
4 |
6 |
7 |
8 | child element
9 | child
11 |
12 |
13 |
14 |
15 |
33 | host element
34 | shadow host
36 |
37 |
38 |
43 | shadow root
44 | shadow root
46 |
47 |
48 |
--------------------------------------------------------------------------------
/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/shadow/WD-shadow-dom-20151006/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-20151006/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-20151006/working-draft.js:
--------------------------------------------------------------------------------
1 | function hideWIP(elem){
2 | elem.parentNode.parentNode.id = '';
3 | elem.parentNode.id = '';
4 | elem.style.display = 'none';
5 | }
6 |
--------------------------------------------------------------------------------
/publish/shadow/WD-shadow-dom-20151008/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-20151008/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-20151008/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/entry-helper.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Web Components Examples: Entry Helper
5 |
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 | Web Components Examples
5 |
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 |
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 | 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 contentinsertion 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 | 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 |
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 | Web Components Example: Timezone Selection via Image
5 |
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 | Web Components Example: Timezone Selection via Image (decorator)
5 | 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 | Redirecting to https://html.spec.whatwg.org/multipage/custom-elements.html
4 |