solarite 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/package.json +6 -5
  2. package/benchmarks/naive/Solarite.min.js +0 -4
  3. package/benchmarks/naive/index.html +0 -14
  4. package/benchmarks/naive/main.js +0 -339
  5. package/benchmarks/naive/package-lock.json +0 -13
  6. package/benchmarks/naive/package.json +0 -23
  7. package/benchmarks/readme.md +0 -48
  8. package/build/build.bat +0 -4
  9. package/build/build.js +0 -139
  10. package/build/lib/rollup.min.js +0 -11
  11. package/build/lib/source-map.min.js +0 -1
  12. package/build/lib/terser.min.js +0 -1
  13. package/docs/index.md +0 -883
  14. package/docs/js/Playground.js +0 -184
  15. package/docs/js/codemirror/codemirror6.js +0 -32513
  16. package/docs/js/codemirror/themeSolarIce.js +0 -312
  17. package/docs/js/documentation.js +0 -32
  18. package/docs/js/ui/CodeEditor.js +0 -978
  19. package/docs/js/ui/DarkToggle.js +0 -52
  20. package/docs/js/ui/FlexResizer.js +0 -152
  21. package/docs/js/util/Draggable2.js +0 -151
  22. package/docs/js/util/Errors.js +0 -20
  23. package/docs/js/util/Html.js +0 -147
  24. package/docs/js/util/Icons.js +0 -623
  25. package/docs/js/util/Input.js +0 -253
  26. package/docs/js/util/Util.js +0 -88
  27. package/docs/js/util/delve.js +0 -43
  28. package/docs/media/FiraCode400.woff2 +0 -0
  29. package/docs/media/cabin-latin-700.woff2 +0 -0
  30. package/docs/media/documentation.css +0 -96
  31. package/docs/media/eternium.css +0 -1123
  32. package/docs/media/solarite-machine.webp +0 -0
  33. package/index.html +0 -761
  34. package/tests/Benchmark.test.js +0 -319
  35. package/tests/Solarite.test.js +0 -3838
  36. package/tests/Testimony.js +0 -809
  37. package/tests/index.html +0 -46
  38. package/tests/run.bat +0 -2
package/index.html DELETED
@@ -1,761 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
5
- <script src="docs/js/ui/DarkToggle.js"></script><script type="module" src="docs/js/documentation.js"></script><link rel="stylesheet" href="docs/media/documentation.css"><link rel="stylesheet" href="docs/media/eternium.css"><link rel="icon" href="docs/media/solarite-machine.webp" type="image/webp"><script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
6
- <link href='https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet' type='text/css' /><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; --title-bar-height:20px; }
7
- .mac-os-11 { --title-bar-height:28px; }
8
- html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
9
- h1, h2, h3, h4, h5 { white-space: pre-wrap; }
10
- body { margin: 0px; padding: 0px; height: auto; inset: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; }
11
- iframe { margin: auto; }
12
- a.url { word-break: break-all; }
13
- a:active, a:hover { outline: 0px; }
14
- .in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
15
- #write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 36px; }
16
- #write.first-line-indent p { text-indent: 2em; }
17
- #write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
18
- #write.first-line-indent li { margin-left: 2em; }
19
- .for-image #write { padding-left: 8px; padding-right: 8px; }
20
- body.typora-export { padding-left: 30px; padding-right: 30px; }
21
- .typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
22
- .typora-export .task-list-item input { pointer-events: none; }
23
- @media screen and (max-width: 500px) {
24
- body.typora-export { padding-left: 0px; padding-right: 0px; }
25
- #write { padding-left: 20px; padding-right: 20px; }
26
- }
27
- #write li > figure:last-child { margin-bottom: 0.5rem; }
28
- #write ol, #write ul { position: relative; }
29
- img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
30
- button, input, select, textarea { color: inherit; font: inherit; }
31
- input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
32
- *, ::after, ::before { box-sizing: border-box; }
33
- #write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
34
- #write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
35
- p { line-height: inherit; }
36
- h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
37
- p { orphans: 4; }
38
- h1 { font-size: 2rem; }
39
- h2 { font-size: 1.8rem; }
40
- h3 { font-size: 1.6rem; }
41
- h4 { font-size: 1.4rem; }
42
- h5 { font-size: 1.2rem; }
43
- h6 { font-size: 1rem; }
44
- .md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
45
- .hidden { display: none; }
46
- .md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
47
- a { cursor: pointer; }
48
- sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
49
- sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
50
- #write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
51
- figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
52
- figure > table { margin: 0px; }
53
- thead, tr { break-inside: avoid; break-after: auto; }
54
- thead { display: table-header-group; }
55
- table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
56
- table.md-table td { min-width: 32px; }
57
- .CodeMirror-gutters { border-right: 0px; background-color: inherit; }
58
- .CodeMirror-linenumber { user-select: none; }
59
- .CodeMirror { text-align: left; }
60
- .CodeMirror-placeholder { opacity: 0.3; }
61
- .CodeMirror pre { padding: 0px 4px; }
62
- .CodeMirror-lines { padding: 0px; }
63
- div.hr:focus { cursor: none; }
64
- #write pre { white-space: pre-wrap; }
65
- #write.fences-no-line-wrapping pre { white-space: pre; }
66
- #write pre.ty-contain-cm { white-space: normal; }
67
- .CodeMirror-gutters { margin-right: 4px; }
68
- .md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
69
- .md-fences-adv-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
70
- #write .md-fences.mock-cm { white-space: pre-wrap; }
71
- .md-fences.md-fences-with-lineno { padding-left: 0px; }
72
- #write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
73
- .md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
74
- .CodeMirror-line, twitterwidget { break-inside: avoid; }
75
- svg { break-inside: avoid; }
76
- .footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
77
- .footnotes + .footnotes { margin-top: 0px; }
78
- .md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
79
- li div { padding-top: 0px; }
80
- blockquote { margin: 1rem 0px; }
81
- li .mathjax-block, li p { margin: 0.5rem 0px; }
82
- li blockquote { margin: 1rem 0px; }
83
- li { margin: 0px; position: relative; }
84
- blockquote > :last-child { margin-bottom: 0px; }
85
- blockquote > :first-child, li > :first-child { margin-top: 0px; }
86
- .footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
87
- #write .footnote-line { white-space: pre-wrap; }
88
- @media print {
89
- body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
90
- #write { margin-top: 0px; border-color: transparent !important; padding-top: 0px !important; padding-bottom: 0px !important; }
91
- .typora-export * { -webkit-print-color-adjust: exact; }
92
- .typora-export #write { break-after: avoid; }
93
- .typora-export #write::after { height: 0px; }
94
- .is-mac table { break-inside: avoid; }
95
- #write > p:nth-child(1) { margin-top: 0px; }
96
- .typora-export-show-outline .typora-export-sidebar { display: none; }
97
- figure { overflow-x: visible; }
98
- }
99
- .footnote-line { margin-top: 0.714em; font-size: 0.7em; }
100
- a img, img a { cursor: pointer; }
101
- pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
102
- p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
103
- #write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
104
- p > .md-image:only-child { display: inline-block; width: 100%; }
105
- #write .MathJax_Display { margin: 0.8em 0px 0px; }
106
- .md-math-block { width: 100%; }
107
- .md-math-block:not(:empty)::after { display: none; }
108
- .MathJax_ref { fill: currentcolor; }
109
- [contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
110
- .md-task-list-item { position: relative; list-style-type: none; }
111
- .task-list-item.md-task-list-item { padding-left: 0px; }
112
- .md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
113
- .math { font-size: 1rem; }
114
- .md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
115
- .md-toc-content { position: relative; margin-left: 0px; }
116
- .md-toc-content::after, .md-toc::after { display: none; }
117
- .md-toc-item { display: block; color: rgb(65, 131, 196); }
118
- .md-toc-item a { text-decoration: none; }
119
- .md-toc-inner:hover { text-decoration: underline; }
120
- .md-toc-inner { display: inline-block; cursor: pointer; }
121
- .md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
122
- .md-toc-h2 .md-toc-inner { margin-left: 2em; }
123
- .md-toc-h3 .md-toc-inner { margin-left: 4em; }
124
- .md-toc-h4 .md-toc-inner { margin-left: 6em; }
125
- .md-toc-h5 .md-toc-inner { margin-left: 8em; }
126
- .md-toc-h6 .md-toc-inner { margin-left: 10em; }
127
- @media screen and (max-width: 48em) {
128
- .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
129
- .md-toc-h4 .md-toc-inner { margin-left: 5em; }
130
- .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
131
- .md-toc-h6 .md-toc-inner { margin-left: 8em; }
132
- }
133
- a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
134
- .footnote-line a:not(.reversefootnote) { color: inherit; }
135
- .reversefootnote { font-family: ui-monospace, sans-serif; }
136
- .md-attr { display: none; }
137
- .md-fn-count::after { content: "."; }
138
- code, pre, samp, tt { font-family: var(--monospace); }
139
- kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
140
- .md-comment { color: rgb(162, 127, 3); opacity: 0.6; font-family: var(--monospace); }
141
- code { text-align: left; vertical-align: initial; }
142
- a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
143
- .os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
144
- .md-diagram-panel > svg { max-width: 100%; }
145
- [lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
146
- [lang="mermaid"] .node text { font-size: 1rem; }
147
- table tr th { border-bottom: 0px; }
148
- video { max-width: 100%; display: block; margin: 0px auto; }
149
- iframe { max-width: 100%; width: 100%; border: none; }
150
- .highlight td, .highlight tr { border: 0px; }
151
- mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
152
- .md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
153
- .md-expand mark .md-meta { opacity: 0.3 !important; }
154
- mark .md-meta { color: rgb(0, 0, 0); }
155
- @media print {
156
- .typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid; }
157
- }
158
- .md-diagram-panel .messageText { stroke: none !important; }
159
- .md-diagram-panel .start-state { fill: var(--node-fill); }
160
- .md-diagram-panel .edgeLabel rect { opacity: 1 !important; }
161
- .md-fences.md-fences-math { font-size: 1em; }
162
- .md-fences-advanced:not(.md-focus) { padding: 0px; white-space: nowrap; border: 0px; }
163
- .md-fences-advanced:not(.md-focus) { background: inherit; }
164
- .typora-export-show-outline .typora-export-content { max-width: 1440px; margin: auto; display: flex; flex-direction: row; }
165
- .typora-export-sidebar { width: 300px; font-size: 0.8rem; margin-top: 80px; margin-right: 18px; }
166
- .typora-export-show-outline #write { --webkit-flex:2; flex: 2 1 0%; }
167
- .typora-export-sidebar .outline-content { position: fixed; top: 0px; max-height: 100%; overflow: hidden auto; padding-bottom: 30px; padding-top: 60px; width: 300px; }
168
- @media screen and (max-width: 1024px) {
169
- .typora-export-sidebar, .typora-export-sidebar .outline-content { width: 240px; }
170
- }
171
- @media screen and (max-width: 800px) {
172
- .typora-export-sidebar { display: none; }
173
- }
174
- .outline-content li, .outline-content ul { margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; list-style: none; overflow-wrap: anywhere; }
175
- .outline-content ul { margin-top: 0px; margin-bottom: 0px; }
176
- .outline-content strong { font-weight: 400; }
177
- .outline-expander { width: 1rem; height: 1.42857rem; position: relative; display: table-cell; vertical-align: middle; cursor: pointer; padding-left: 4px; }
178
- .outline-expander::before { content: ""; position: relative; font-family: Ionicons; display: inline-block; font-size: 8px; vertical-align: middle; }
179
- .outline-item { padding-top: 3px; padding-bottom: 3px; cursor: pointer; }
180
- .outline-expander:hover::before { content: ""; }
181
- .outline-h1 > .outline-item { padding-left: 0px; }
182
- .outline-h2 > .outline-item { padding-left: 1em; }
183
- .outline-h3 > .outline-item { padding-left: 2em; }
184
- .outline-h4 > .outline-item { padding-left: 3em; }
185
- .outline-h5 > .outline-item { padding-left: 4em; }
186
- .outline-h6 > .outline-item { padding-left: 5em; }
187
- .outline-label { cursor: pointer; display: table-cell; vertical-align: middle; text-decoration: none; color: inherit; }
188
- .outline-label:hover { text-decoration: underline; }
189
- .outline-item:hover { border-color: rgb(245, 245, 245); background-color: var(--item-hover-bg-color); }
190
- .outline-item:hover { margin-left: -28px; margin-right: -28px; border-left: 28px solid transparent; border-right: 28px solid transparent; }
191
- .outline-item-single .outline-expander::before, .outline-item-single .outline-expander:hover::before { display: none; }
192
- .outline-item-open > .outline-item > .outline-expander::before { content: ""; }
193
- .outline-children { display: none; }
194
- .info-panel-tab-wrapper { display: none; }
195
- .outline-item-open > .outline-children { display: block; }
196
- .typora-export .outline-item { padding-top: 1px; padding-bottom: 1px; }
197
- .typora-export .outline-item:hover { margin-right: -8px; border-right: 8px solid transparent; }
198
- .typora-export .outline-expander::before { content: "+"; font-family: inherit; top: -1px; }
199
- .typora-export .outline-expander:hover::before, .typora-export .outline-item-open > .outline-item > .outline-expander::before { content: "−"; }
200
- .typora-export-collapse-outline .outline-children { display: none; }
201
- .typora-export-collapse-outline .outline-item-open > .outline-children, .typora-export-no-collapse-outline .outline-children { display: block; }
202
- .typora-export-no-collapse-outline .outline-expander::before { content: "" !important; }
203
- .typora-export-show-outline .outline-item-active > .outline-item .outline-label { font-weight: 700; }
204
- .md-inline-math-container mjx-container { zoom: 0.95; }
205
- mjx-container { break-inside: avoid; }
206
-
207
-
208
- .CodeMirror { height: auto; }
209
- .CodeMirror.cm-s-inner { background: inherit; }
210
- .CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
211
- .CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
212
- .CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
213
- .CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
214
- .cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
215
- .cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
216
- .cm-s-inner .cm-number { color: rgb(17, 102, 68); }
217
- .cm-s-inner .cm-def { color: rgb(0, 0, 255); }
218
- .cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
219
- .cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
220
- .cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
221
- .cm-s-inner .cm-string { color: rgb(170, 17, 17); }
222
- .cm-s-inner .cm-property { color: rgb(0, 0, 0); }
223
- .cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
224
- .cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
225
- .cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
226
- .cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
227
- .cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
228
- .cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
229
- .cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
230
- .cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
231
- .cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
232
- .cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
233
- .cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
234
- .cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
235
- .cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
236
- .cm-negative { color: rgb(221, 68, 68); }
237
- .cm-positive { color: rgb(34, 153, 34); }
238
- .cm-header, .cm-strong { font-weight: 700; }
239
- .cm-del { text-decoration: line-through; }
240
- .cm-em { font-style: italic; }
241
- .cm-link { text-decoration: underline; }
242
- .cm-error { color: red; }
243
- .cm-invalidchar { color: red; }
244
- .cm-constant { color: rgb(38, 139, 210); }
245
- .cm-defined { color: rgb(181, 137, 0); }
246
- div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
247
- div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
248
- .cm-s-inner .CodeMirror-activeline-background { background: inherit; }
249
- .CodeMirror { position: relative; overflow: hidden; }
250
- .CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
251
- .CodeMirror-sizer { position: relative; }
252
- .CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; outline: 0px; }
253
- .CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
254
- .CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: auto hidden; }
255
- .CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
256
- .CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
257
- .CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 10px; z-index: 3; overflow-y: hidden; }
258
- .CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
259
- .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
260
- .CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
261
- .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
262
- .CodeMirror-lines { cursor: text; }
263
- .CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
264
- .CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
265
- .CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
266
- .CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
267
- .CodeMirror-linebackground { position: absolute; inset: 0px; z-index: 0; }
268
- .CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
269
- .CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
270
- .CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
271
- .CodeMirror-measure pre { position: static; }
272
- .CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
273
- .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
274
- .CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
275
- .cm-searching { background: rgba(255, 255, 0, 0.4); }
276
- span.cm-underlined { text-decoration: underline; }
277
- span.cm-strikethrough { text-decoration: line-through; }
278
- .cm-tw-syntaxerror { color: rgb(255, 255, 255); background-color: rgb(153, 0, 0); }
279
- .cm-tw-deleted { text-decoration: line-through; }
280
- .cm-tw-header5 { font-weight: 700; }
281
- .cm-tw-listitem:first-child { padding-left: 10px; }
282
- .cm-tw-box { border-style: solid; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-color: inherit; border-top-width: 0px !important; }
283
- .cm-tw-underline { text-decoration: underline; }
284
- @media print {
285
- .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
286
- }
287
-
288
-
289
- :root {
290
- --side-bar-bg-color: #fafafa;
291
- --control-text-color: #777;
292
- }
293
-
294
- @include-when-export url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
295
-
296
- /* open-sans-regular - latin-ext_latin */
297
- /* open-sans-italic - latin-ext_latin */
298
- /* open-sans-700 - latin-ext_latin */
299
- /* open-sans-700italic - latin-ext_latin */
300
- html {
301
- font-size: 16px;
302
- -webkit-font-smoothing: antialiased;
303
- }
304
-
305
- body {
306
- font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, 'Segoe UI Emoji', sans-serif;
307
- color: rgb(51, 51, 51);
308
- line-height: 1.6;
309
- }
310
-
311
- #write {
312
- max-width: 860px;
313
- margin: 0 auto;
314
- padding: 30px;
315
- padding-bottom: 100px;
316
- }
317
-
318
- @media only screen and (min-width: 1400px) {
319
- #write {
320
- max-width: 1024px;
321
- }
322
- }
323
-
324
- @media only screen and (min-width: 1800px) {
325
- #write {
326
- max-width: 1200px;
327
- }
328
- }
329
-
330
- #write > ul:first-child,
331
- #write > ol:first-child{
332
- margin-top: 30px;
333
- }
334
-
335
- a {
336
- color: #4183C4;
337
- }
338
- h1,
339
- h2,
340
- h3,
341
- h4,
342
- h5,
343
- h6 {
344
- position: relative;
345
- margin-top: 1rem;
346
- margin-bottom: 1rem;
347
- font-weight: bold;
348
- line-height: 1.4;
349
- cursor: text;
350
- }
351
- h1:hover a.anchor,
352
- h2:hover a.anchor,
353
- h3:hover a.anchor,
354
- h4:hover a.anchor,
355
- h5:hover a.anchor,
356
- h6:hover a.anchor {
357
- text-decoration: none;
358
- }
359
- h1 tt,
360
- h1 code {
361
- font-size: inherit;
362
- }
363
- h2 tt,
364
- h2 code {
365
- font-size: inherit;
366
- }
367
- h3 tt,
368
- h3 code {
369
- font-size: inherit;
370
- }
371
- h4 tt,
372
- h4 code {
373
- font-size: inherit;
374
- }
375
- h5 tt,
376
- h5 code {
377
- font-size: inherit;
378
- }
379
- h6 tt,
380
- h6 code {
381
- font-size: inherit;
382
- }
383
- h1 {
384
- font-size: 2.25em;
385
- line-height: 1.2;
386
- border-bottom: 1px solid #eee;
387
- }
388
- h2 {
389
- font-size: 1.75em;
390
- line-height: 1.225;
391
- border-bottom: 1px solid #eee;
392
- }
393
-
394
- /*@media print {
395
- .typora-export h1,
396
- .typora-export h2 {
397
- border-bottom: none;
398
- padding-bottom: initial;
399
- }
400
-
401
- .typora-export h1::after,
402
- .typora-export h2::after {
403
- content: "";
404
- display: block;
405
- height: 100px;
406
- margin-top: -96px;
407
- border-top: 1px solid #eee;
408
- }
409
- }*/
410
-
411
- h3 {
412
- font-size: 1.5em;
413
- line-height: 1.43;
414
- }
415
- h4 {
416
- font-size: 1.25em;
417
- }
418
- h5 {
419
- font-size: 1em;
420
- }
421
- h6 {
422
- font-size: 1em;
423
- color: #777;
424
- }
425
- p,
426
- blockquote,
427
- ul,
428
- ol,
429
- dl,
430
- table{
431
- margin: 0.8em 0;
432
- }
433
- li>ol,
434
- li>ul {
435
- margin: 0 0;
436
- }
437
- hr {
438
- height: 2px;
439
- padding: 0;
440
- margin: 16px 0;
441
- background-color: #e7e7e7;
442
- border: 0 none;
443
- overflow: hidden;
444
- box-sizing: content-box;
445
- }
446
-
447
- li p.first {
448
- display: inline-block;
449
- }
450
- ul,
451
- ol {
452
- padding-left: 30px;
453
- }
454
- ul:first-child,
455
- ol:first-child {
456
- margin-top: 0;
457
- }
458
- ul:last-child,
459
- ol:last-child {
460
- margin-bottom: 0;
461
- }
462
- blockquote {
463
- border-left: 4px solid #dfe2e5;
464
- padding: 0 15px;
465
- color: #777777;
466
- }
467
- blockquote blockquote {
468
- padding-right: 0;
469
- }
470
- table {
471
- padding: 0;
472
- word-break: initial;
473
- }
474
- table tr {
475
- border: 1px solid #dfe2e5;
476
- margin: 0;
477
- padding: 0;
478
- }
479
- table tr:nth-child(2n),
480
- thead {
481
- background-color: #f8f8f8;
482
- }
483
- table th {
484
- font-weight: bold;
485
- border: 1px solid #dfe2e5;
486
- border-bottom: 0;
487
- margin: 0;
488
- padding: 6px 13px;
489
- }
490
- table td {
491
- border: 1px solid #dfe2e5;
492
- margin: 0;
493
- padding: 6px 13px;
494
- }
495
- table th:first-child,
496
- table td:first-child {
497
- margin-top: 0;
498
- }
499
- table th:last-child,
500
- table td:last-child {
501
- margin-bottom: 0;
502
- }
503
-
504
- .CodeMirror-lines {
505
- padding-left: 4px;
506
- }
507
-
508
- .code-tooltip {
509
- box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
510
- border-top: 1px solid #eef2f2;
511
- }
512
-
513
- .md-fences,
514
- code,
515
- tt {
516
- border: 1px solid #e7eaed;
517
- background-color: #f8f8f8;
518
- border-radius: 3px;
519
- padding: 0;
520
- padding: 2px 4px 0px 4px;
521
- font-size: 0.9em;
522
- }
523
-
524
- code {
525
- background-color: #f3f4f4;
526
- padding: 0 2px 0 2px;
527
- }
528
-
529
- .md-fences {
530
- margin-bottom: 15px;
531
- margin-top: 15px;
532
- padding-top: 8px;
533
- padding-bottom: 6px;
534
- }
535
-
536
-
537
- .md-task-list-item > input {
538
- margin-left: -1.3em;
539
- }
540
-
541
- @media print {
542
- html {
543
- font-size: 13px;
544
- }
545
- pre {
546
- page-break-inside: avoid;
547
- word-wrap: break-word;
548
- }
549
- }
550
-
551
- .md-fences {
552
- background-color: #f8f8f8;
553
- }
554
- #write pre.md-meta-block {
555
- padding: 1rem;
556
- font-size: 85%;
557
- line-height: 1.45;
558
- background-color: #f7f7f7;
559
- border: 0;
560
- border-radius: 3px;
561
- color: #777777;
562
- margin-top: 0 !important;
563
- }
564
-
565
- .mathjax-block>.code-tooltip {
566
- bottom: .375rem;
567
- }
568
-
569
- .md-mathjax-midline {
570
- background: #fafafa;
571
- }
572
-
573
- #write>h3.md-focus:before{
574
- left: -1.5625rem;
575
- top: .375rem;
576
- }
577
- #write>h4.md-focus:before{
578
- left: -1.5625rem;
579
- top: .285714286rem;
580
- }
581
- #write>h5.md-focus:before{
582
- left: -1.5625rem;
583
- top: .285714286rem;
584
- }
585
- #write>h6.md-focus:before{
586
- left: -1.5625rem;
587
- top: .285714286rem;
588
- }
589
- .md-image>.md-meta {
590
- /*border: 1px solid #ddd;*/
591
- border-radius: 3px;
592
- padding: 2px 0px 0px 4px;
593
- font-size: 0.9em;
594
- color: inherit;
595
- }
596
-
597
- .md-tag {
598
- color: #a7a7a7;
599
- opacity: 1;
600
- }
601
-
602
- .md-toc {
603
- margin-top:20px;
604
- padding-bottom:20px;
605
- }
606
-
607
- .sidebar-tabs {
608
- border-bottom: none;
609
- }
610
-
611
- #typora-quick-open {
612
- border: 1px solid #ddd;
613
- background-color: #f8f8f8;
614
- }
615
-
616
- #typora-quick-open-item {
617
- background-color: #FAFAFA;
618
- border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
619
- border-style: solid;
620
- border-width: 1px;
621
- }
622
-
623
- /** focus mode */
624
- .on-focus-mode blockquote {
625
- border-left-color: rgba(85, 85, 85, 0.12);
626
- }
627
-
628
- header, .context-menu, .megamenu-content, footer{
629
- font-family: "Segoe UI", "Arial", sans-serif;
630
- }
631
-
632
- .file-node-content:hover .file-node-icon,
633
- .file-node-content:hover .file-node-open-state{
634
- visibility: visible;
635
- }
636
-
637
- .mac-seamless-mode #typora-sidebar {
638
- background-color: #fafafa;
639
- background-color: var(--side-bar-bg-color);
640
- }
641
-
642
- .md-lang {
643
- color: #b4654d;
644
- }
645
-
646
- /*.html-for-mac {
647
- --item-hover-bg-color: #E6F0FE;
648
- }*/
649
-
650
- #md-notification .btn {
651
- border: 0;
652
- }
653
-
654
- .dropdown-menu .divider {
655
- border-color: #e5e5e5;
656
- opacity: 0.4;
657
- }
658
-
659
- .ty-preferences .window-content {
660
- background-color: #fafafa;
661
- }
662
-
663
- .ty-preferences .nav-group-item.active {
664
- color: white;
665
- background: #999;
666
- }
667
-
668
- .menu-item-container a.menu-style-btn {
669
- background-color: #f5f8fa;
670
- background-image: linear-gradient( 180deg , hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0));
671
- }
672
-
673
-
674
-
675
- </style><title>Solarite JS Library</title>
676
- </head>
677
- <body class='typora-export os-windows typora-export-show-outline typora-export-no-collapse-outline'><div class='typora-export-content'>
678
- <div class="typora-export-sidebar"><div class="outline-content"><li class="outline-item-wrapper outline-h1"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#solarite">Solarite</a></div><ul class="outline-children"><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#concepts">Concepts</a></div><ul class="outline-children"><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#regular-elements">Regular Elements</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#web-components">Web Components</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#rendering">Rendering</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#attributes">Attributes</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#ids">Id's</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#events">Events</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#two-way-binding">Two-Way Binding</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#loops">Loops</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#scoped-styles">Scoped Styles</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#child-components">Child Components</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#the-r-function">The r() function</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#extending-other-dom-elements">Extending Other DOM Elements.</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#manual-dom-ops">Manual DOM Ops</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h3"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#the-solarite-class-experimental">The Solarite Class (Experimental)</a></div><ul class="outline-children"></ul></li></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#how-it-works">How it works</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#examples">Examples</a></div><ul class="outline-children"></ul></li><li class="outline-item-wrapper outline-h2"><div class="outline-item"><span class="outline-expander"></span><a class="outline-label" href="#upcoming-features">Upcoming Features</a></div><ul class="outline-children"></ul></li></ul></li></div></div><div id='write' class=''><!-- To convert documentation to html: (1) Open in Typora. (2) Select the GitHub theme, or go to Settings -> Export -> Html -> Theme -> Github. (3) Export as html with styles to index.html. --><!-- Playgrounds that don't have a lowercase language name will not have a preview. --><h1 id='solarite'><span>Solarite</span></h1><p><span>Solarite is a small (8KB min+gzip), fast, compilation-free JavaScript library for creating elements and web components. Features:</span></p><ul><li><p><span>Minimal DOM updates when rendering.</span></p></li><li><p><span>No magic: Renderer only when you want via the manually invoked </span><code>render()</code><span> method.</span></p></li><li><p><span>No setting up state variables. Render any regular variable or data structure.</span></p></li><li><p><span>Local scoped styles: Inherit external styles but define new styles that apply only to the web component and its children.</span></p></li><li><p><span>Elements with </span><code>id</code><span> or </span><code>data-id</code><span> attributes become class properties.</span></p></li><li><p><span>Attributes are passed as constructor arguments to nested components.</span></p></li><li><p><span>Single file. No build steps and no dependencies. Not even Node.js. Just </span><code>import</code><span> Solarite.js or Solarite.min.js into your vanilla JavaScript and start coding.</span></p></li><li><p><span>MIT license. Free for commercial use. No attribution needed.</span></p></li></ul><pre class="md-fences md-end-block ty-contain-cm modeLoaded md-focus" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap CodeMirror-focused" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 613.398px; left: 414.781px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre>x</pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="" style="position: relative;"><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
679
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">ShoppingList</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>(<span class="cm-def">items</span><span class="cm-operator">=</span>[]) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">items</span> <span class="cm-operator">=</span> <span class="cm-variable-2">items</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
680
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">addItem</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">push</span>({<span class="cm-property">name</span>: <span class="cm-string">''</span>, <span class="cm-property">qty</span>: <span class="cm-number">0</span>});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
681
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">removeItem</span>(<span class="cm-def">item</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">splice</span>(<span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">indexOf</span>(<span class="cm-variable-2">item</span>), <span class="cm-number">1</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
682
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// Think of r(this) as like:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// this.outerHTML = `&lt;shopping-list&gt;...` </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// but rendering only minimal DOM updates when the html changes.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;shopping-list&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;style&gt; /* scoped styles */</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">:host input { width: 80px }</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/style&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
683
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;button onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">addItem</span><span class="cm-string-2">}&gt;Add Item&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
684
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=&gt;</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div&gt;</span></span></pre><div class="" style="position: relative;"><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;input placeholder="Item" oninput=${</span><span class="cm-keyword">this</span>.<span class="cm-property">render</span><span class="cm-string-2">}</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">value=${</span>[<span class="cm-variable-2">item</span>, <span class="cm-string">'name'</span>]<span class="cm-string-2">}&gt; &lt;!-- 2-way binding --&gt;</span></span></pre><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;input type="number" oninput=${</span><span class="cm-keyword">this</span>.<span class="cm-property">render</span><span class="cm-string-2">}</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">value=${</span>[<span class="cm-variable-2">item</span>, <span class="cm-string">'qty'</span>]<span class="cm-string-2">}&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;button onclick=${</span>()<span class="cm-operator">=&gt;</span><span class="cm-keyword">this</span>.<span class="cm-property">removeItem</span>(<span class="cm-variable-2">item</span>)<span class="cm-string-2">}&gt;x&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/div&gt;<span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">`</span>)<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
685
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;pre&gt;items = ${</span><span class="cm-variable">JSON</span>.<span class="cm-property">stringify</span>(<span class="cm-keyword">this</span>.<span class="cm-property">items</span>, <span class="cm-atom">null</span>, <span class="cm-number">4</span>)<span class="cm-string-2">}&lt;/pre&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/shopping-list&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
686
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'shopping-list'</span>, <span class="cm-variable">ShoppingList</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">ShoppingList</span>()); <span class="cm-comment">// add &lt;shopping-list&gt; element</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 828px;"></div><div class="CodeMirror-gutters" style="display: none; height: 828px;"></div></div></div></pre><p><span>To use, import one of these pre-bundled es6 modules into your project:</span></p><ul><li><p><a href='https://cdn.jsdelivr.net/gh/Vorticode/Solarite/dist/Solarite.js'><span>Solarite.js</span></a><span> - 85KB</span></p></li><li><p><a href='https://cdn.jsdelivr.net/gh/Vorticode/Solarite/dist/Solarite.min.js'><span>Solarite.min.js</span></a><span> - 24KB / 8KB gzipped</span></p></li></ul><p><span>Or get Solarite from GitHub or NPM:</span></p><ul><li><p><a href='https://github.com/Vorticode/solarite'><span>Solarite GitHub Repository</span></a><span> </span><a class="github-button" href="https://github.com/vorticode/solarite" data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star" data-size="small" data-show-count="true" aria-label="Star vorticode/solarite on GitHub"><span>Star</span></a></p></li><li><p><code>git clone https://github.com/Vorticode/solarite.git</code></p></li><li><p><code>npm install solarite</code></p></li></ul><p><span>This project is currently in BETA stage. Tip: A JetBrains IDE like </span><a href='https://www.jetbrains.com/webstorm/'><span>WebStorm</span></a><span>, </span><a href='https://www.jetbrains.com/phpstorm/'><span>PhpStorm</span></a><span>, or </span><a href='https://www.jetbrains.com/idea/'><span>IDEA</span></a><span> will syntax highlight the html template strings.</span></p><h2 id='concepts'><span>Concepts</span></h2><h3 id='regular-elements'><span>Regular Elements</span></h3><p><span>The </span><code>r()</code><span> function can create elements. Pass any object with a </span><code>render()</code><span> function as the first argument. This object can optionally have additional properties and methods, which become bound to the resulting element. When </span><code>render()</code><span> is called, only the changed nodes will be updated.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
687
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">button</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">count</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
688
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">inc</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-operator">++</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
689
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`&lt;button onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">inc</span><span class="cm-string-2">}&gt;I've been clicked ${</span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-string-2">}</span> <span class="cm-string-2">times.&lt;/button&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">button</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 269px;"></div><div class="CodeMirror-gutters" style="display: none; height: 269px;"></div></div></div></pre><p><span>If you want multiple instances of such an element, the code above can be wrapped in a function:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
690
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">createButton</span>(<span class="cm-def">text</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">return</span> <span class="cm-variable">r</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">count</span>: <span class="cm-number">0</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
691
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">inc</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-operator">++</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
692
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`&lt;button onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">inc</span><span class="cm-string-2">}&gt;${</span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-string-2">}</span> <span class="cm-string-2">${</span><span class="cm-variable-2">text</span><span class="cm-string-2">}&lt;/button&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>})</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">createButton</span>(<span class="cm-string">'clicks'</span>));</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">createButton</span>(<span class="cm-string">'tickles'</span>));</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 313px;"></div><div class="CodeMirror-gutters" style="display: none; height: 313px;"></div></div></div></pre><h3 id='web-components'><span>Web Components</span></h3><p><span>Solarite can also create </span><a href='https://developer.mozilla.org/en-US/docs/Web/API/Web_components'><span>web components</span></a><span>. In this minimal example, we make a new class called </span><code>MyComponent</code><span> which extends from </span><code>HTMLElement</code><span> like any other web component. We provide a </span><code>render()</code><span> function to set its html, and a constructor to call it when a new instance is created.</span></p><p><span>All browsers require web component tag names to have at least one dash in the middle. </span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
693
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">MyComponent</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-string">'Solarite'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">constructor</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">super</span>(); <span class="cm-comment">// JavaScript requires a super() call for sub-class construtors.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-comment">// This is how we'd create a web component using vanilla JavaScript</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-comment">// without Solarite. But this recreates all children on every render!</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-comment">//this.innerHTML = `Hello &lt;b&gt;${this.name}!&lt;b&gt;`;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-comment">// Using Solarite's r() function performs minimal updates on render.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`&lt;my-component&gt;Hello &lt;b&gt;${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}!&lt;/b&gt;&lt;/my-component&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
694
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Register the &lt;my-component&gt; tag name with the browser.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Browsers require this for all web components.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'my-component'</span>, <span class="cm-variable">MyComponent</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
695
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">MyComponent</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 425px;"></div><div class="CodeMirror-gutters" style="display: none; height: 425px;"></div></div></div></pre><p><span>Alternatively, instead of instantiating the element in JavaScript, we could can instantiate the element directly from html:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="Html"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">my-component</span><span class="cm-tag cm-bracket">&gt;&lt;/</span><span class="cm-tag">my-component</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 17px;"></div><div class="CodeMirror-gutters" style="display: none; height: 17px;"></div></div></div></pre><p><span>JavaScript veterans will realize that other than the </span><code>r()</code><span> function, this is highly similar to one might create vanilla JavaScript web components. This is by design!</span></p><p><span>Since these are just regular web components, they can define the </span><a href='https://developer.salesforce.com/docs/platform/lwc/guide/create-lifecycle-hooks-dom.html#connectedcallback'><span>connectedCallback()</span></a><span> and </span><a href='https://developer.salesforce.com/docs/platform/lwc/guide/create-lifecycle-hooks-dom.html#disconnectedcallback'><span>disconnectedCallback()</span></a><span> methods that will be called when they&#39;re added and removed from the DOM, respectively. These functions are only supported for web components and not regular elements.</span></p><h3 id='rendering'><span>Rendering</span></h3><p><span>The </span><code>r</code><span> function, when used as a </span><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates'><span>tagged template literal</span></a><span> , converts the html and embedded expressions into a Solarite </span><code>Template</code><span>. This is a data structure used by Solarite to store processed html and expressions. The call to </span><code>r(this)</code><span> then renders that </span><code>Template</code><span> as an element&#39;s attributes and children. You can think of this like assigning to the browser&#39;s built-in </span><code>this.outerHTML</code><span> property, except updates are much faster because only the changed elements are replaced, instead of all nodes.</span></p><p><span>Unlike other frameworks, Solarite does not re-render automatically when data changes, so you should call the </span><code>render()</code><span> function manually. This is a deliberate design choice to reduce unexpected side effects, since in some cases you may want to update internal data without rendering.</span></p><p><span>Wrapping the web component&#39;s html in its tag name is optional. But without it you then must set any attributes on your web component manually, as seen in this example:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
696
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">MyComponent</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-string">'Solarite'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// With optional element tags:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// r(this)`&lt;my-component class="big"&gt;Hello &lt;b&gt;${this.name}!&lt;b&gt;&lt;/my-component&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// Without optional element tags:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`Hello &lt;b&gt;${</span><span class="cm-keyword">this</span>.<span class="cm-property">name</span><span class="cm-string-2">}!&lt;b&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">setAttribute</span>(<span class="cm-string">'class'</span>, <span class="cm-string">'big'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'my-component'</span>, <span class="cm-variable">MyComponent</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">MyComponent</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 260px;"></div><div class="CodeMirror-gutters" style="display: none; height: 260px;"></div></div></div></pre><p><span>If you do wrap the web component&#39;s html in its tag, that tag name must exactly match the tag name passed to </span><code>customElements.define()</code><span>.</span></p><p><span>Note that by default, </span><code>r()</code><span> will render expressions as text, with escaped html entities. To render as html, wrap a variable in the </span><code>r()</code><span> function:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
697
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">folderIcon</span> <span class="cm-operator">=</span> <span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-string-2">&lt;svg width="10em" height="10em" viewBox="0 0 24 24"&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;path fill="currentColor" d="M2 4h8l2 2h10v14H2V4Zm2 2v12h16V8h-8.825l-2-2H4Zm0 12V6v12Z"/&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-string-2">&lt;/svg&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
698
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
699
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">icon1</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`&lt;div&gt;${</span><span class="cm-variable">folderIcon</span><span class="cm-string-2">}&lt;/div&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">icon1</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
700
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
701
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">icon2</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { <span class="cm-comment">// string wrapped in r()</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`&lt;div&gt;${</span><span class="cm-variable">r</span>(<span class="cm-variable">folderIcon</span>)<span class="cm-string-2">}&lt;/div&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">icon2</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
702
- </span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 411px;"></div><div class="CodeMirror-gutters" style="display: none; height: 411px;"></div></div></div></pre><p><span>Folder icon comes from </span><a href='https://icon-sets.iconify.design/material-symbols/folder-outline/'><span>Google</span></a><span>.</span></p><p><span>These types of objects can be returned by in expressions with </span><code>r</code><span> tagged template literals:</span></p><ol start='' ><li><p><span>strings and numbers.</span></p></li><li><p><span>boolean true, which will be rendered as &#39;true&#39;</span></p></li><li><p><span>false, null, and undefined, which will be rendered as empty string.</span></p></li><li><p><span>Solarite Templates created by </span><code>r</code><span>-tagged template literals.</span></p></li><li><p><span>DOM Nodes, including other web components.</span></p></li><li><p><span>Arrays of any of the above.</span></p></li><li><p><span>Functions that return any of the above.</span></p></li></ol><h3 id='attributes'><span>Attributes</span></h3><p><span>Dynamic attributes can be specified by inserting expressions inside a tag. An expression can be part or all of an attribute value, or a string specifying multiple whole attributes. For example:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
703
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">style</span> <span class="cm-operator">=</span> <span class="cm-string">'width: 100px; height: 40px; background: orange'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">isEditable</span> <span class="cm-operator">=</span> <span class="cm-atom">true</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">height</span> <span class="cm-operator">=</span> <span class="cm-number">40</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
704
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">attributeDemo</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div class="big"&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div style=${</span><span class="cm-variable">style</span><span class="cm-string-2">}&gt;Look at me&lt;/div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div style="${</span><span class="cm-string">'width: 100px'</span><span class="cm-string-2">}; height: ${</span><span class="cm-variable">height</span><span class="cm-string-2">}px; background: gray"&gt;Look at me&lt;/div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div style="width: 100px; height: 40px; background: brown" ${</span><span class="cm-string">'title="I have a title"'</span><span class="cm-string-2">}&gt;Hover me&lt;/div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div style="width: 100px; height: 40px; background: red" contenteditable=${</span><span class="cm-variable">isEditable</span><span class="cm-string-2">}</span> <span class="cm-string-2">&gt;Edit me&lt;/div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/div&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
705
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">attributeDemo</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
706
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">style</span> <span class="cm-operator">=</span> <span class="cm-string">'width: 100px; height: 40px; background: green'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">setTimeout</span>(<span class="cm-variable">attributeDemo</span>.<span class="cm-property">render</span>, <span class="cm-number">2000</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 424px;"></div><div class="CodeMirror-gutters" style="display: none; height: 424px;"></div></div></div></pre><p><span>Expressions can also toggle the presence of an attribute. In the last div above, if </span><code>isEditable</code><span> is false, null, or undefined, the contenteditable attribute will be removed.</span></p><p><span>Note that attributes can also be assigned to the root element, such as </span><code>class=&quot;big&quot;</code><span> on the </span><code>&lt;attribute-demo&gt;</code><span> tag above.</span></p><h3 id='ids'><span>Id&#39;s</span></h3><p><span>Any element in the html with an </span><code>id</code><span> or </span><code>data-id</code><span> attribute is automatically bound to a property with the same name on the class instance. But this only happens after </span><code>render()</code><span> is first called:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
707
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">raceTeam</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>({ &nbsp; &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;input id="driver" value="Mario"&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div data-id="car"&gt;Cutlas Supreme&lt;/div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;div data-id="instructor.name"&gt;Lightning McQueen&lt;/div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/div&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">raceTeam</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
708
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">raceTeam</span>.<span class="cm-property">driver</span>.<span class="cm-property">value</span> <span class="cm-operator">=</span> <span class="cm-string">'Luigi'</span>; </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">raceTeam</span>.<span class="cm-property">car</span>.<span class="cm-property">style</span>.<span class="cm-property">border</span> <span class="cm-operator">=</span> <span class="cm-string">'1px solid green'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// We don't need to call render() because we're editing the DOM Directly.</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 289px;"></div><div class="CodeMirror-gutters" style="display: none; height: 289px;"></div></div></div></pre><p><span>Id&#39;s that have values matching built-in HTMLElement attribute names such as </span><code>title</code><span> or </span><code>disabled</code><span> are not allowed.</span></p><h3 id='events'><span>Events</span></h3><p><span>To intercept events, set the value of an event attribute like </span><code>onclick</code><span> to a function. Alternatively, set the value to an array where the first item is a function and subsequent items are arguments to that function.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
709
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">EventDemo</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">showMessage</span>(<span class="cm-def">message</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">alert</span>(<span class="cm-variable-2">message</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;event-demo&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;button onclick=${</span>(<span class="cm-def">ev</span>, <span class="cm-def">el</span>)<span class="cm-operator">=&gt;</span><span class="cm-variable">alert</span>(<span class="cm-string">'Element '</span> <span class="cm-operator">+</span> <span class="cm-variable-2">el</span>.<span class="cm-property">tagName</span> <span class="cm-operator">+</span> <span class="cm-string">' clicked!'</span>)<span class="cm-string-2">}&gt;Click me&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;button onclick=${</span>[<span class="cm-keyword">this</span>.<span class="cm-property">showMessage</span>, <span class="cm-string">'I too was clicked!'</span>]<span class="cm-string-2">}&gt;Click me too!&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;/event-demo&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">} </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'event-demo'</span>, <span class="cm-variable">EventDemo</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">EventDemo</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 420px;"></div><div class="CodeMirror-gutters" style="display: none; height: 420px;"></div></div></div></pre><p><span>Event binding with an array containing a function and its arguments is slightly faster, since the function isn&#39;t recreated when </span><code>render()</code><span> is called, and it doesn&#39;t need to be unbound and rebound. But the performance difference is usually negligible.</span></p><p><span>Make sure to put your events inside </span><code>${...}</code><span> expressions, because classic events can&#39;t reference variables in the current scope.</span></p><h3 id='two-way-binding'><span>Two-Way Binding</span></h3><p><span>Form elements can update the properties that provide their values if an event attribute such as </span><code>oninput</code><span> is assigned a function to perform the update:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
710
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">BindingDemo</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">count</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;binding-demo&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;input type="number" value=${</span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-string-2">}</span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">oninput=${</span><span class="cm-def">ev</span> <span class="cm-operator">=&gt;</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">count</span> <span class="cm-operator">=</span> <span class="cm-variable-2">ev</span>.<span class="cm-property">target</span>.<span class="cm-property">value</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<span class="cm-string-2">}&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;pre&gt;count is ${</span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-string-2">}&lt;/pre&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;button onclick=${</span>()<span class="cm-operator">=&gt;</span> { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">count</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<span class="cm-string-2">}&gt;Reset&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/binding-demo&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'binding-demo'</span>, <span class="cm-variable">BindingDemo</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
711
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">BindingDemo</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 492px;"></div><div class="CodeMirror-gutters" style="display: none; height: 492px;"></div></div></div></pre><p><span>In addition to </span><code>&lt;input&gt;</code><span>, </span><code>&lt;select&gt;</code><span> and </span><code>&lt;textarea&gt;</code><span> can also use the </span><code>value</code><span> attribute to set their value on render. Likewise so can any custom web component that defines a </span><code>value</code><span> property.</span></p><p><span>A shorthand way to do two-way binding is to pass a property path as the value expression. Here with </span><code>value=${[this, &#39;count&#39;]}</code><span>. When a user types in the input, Solarite listens to the </span><code>oninput</code><span> listener and updates </span><code>this.count</code><span>. Note that we still need a second </span><code>oninput</code><span> attribute if we want to trigger rendering.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
712
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">BindingDemo</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">count</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;binding-demo&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;input type="number" value=${</span>[<span class="cm-keyword">this</span>, <span class="cm-string">'count'</span>]<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">oninput=${</span>() <span class="cm-operator">=&gt;</span> <span class="cm-keyword">this</span>.<span class="cm-property">render</span>()<span class="cm-string-2">}&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;pre&gt;count is ${</span><span class="cm-keyword">this</span>.<span class="cm-property">count</span><span class="cm-string-2">}&lt;/pre&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;button onclick=${</span>()<span class="cm-operator">=&gt;</span> { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">count</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<span class="cm-string-2">}&gt;Reset&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/binding-demo&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'binding-demo'</span>, <span class="cm-variable">BindingDemo</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
713
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">BindingDemo</span>());</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 442px;"></div><div class="CodeMirror-gutters" style="display: none; height: 442px;"></div></div></div></pre><p>&nbsp;</p><h3 id='loops'><span>Loops</span></h3><p><span>As previously seen, loops can be written with JavaScript&#39;s </span><a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map'><span>Array.map()</span></a><span> function:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
714
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">TodoList</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;todo-list&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=&gt;</span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span><span class="cm-string-2">`${</span><span class="cm-variable-2">item</span><span class="cm-string-2">}&lt;br&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/todo-list&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'todo-list'</span>, <span class="cm-variable">TodoList</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
715
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">list</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">TodoList</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span> <span class="cm-operator">=</span> [<span class="cm-string">'one'</span>, <span class="cm-string">'two'</span>, <span class="cm-string">'three'</span>];</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">list</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
716
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span>[<span class="cm-number">1</span>] <span class="cm-operator">=</span> <span class="cm-string">'2'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
717
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span>.<span class="cm-property">splice</span>(<span class="cm-number">1</span>, <span class="cm-number">0</span>, <span class="cm-string">'two and a half'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 407px;"></div><div class="CodeMirror-gutters" style="display: none; height: 407px;"></div></div></div></pre><p><span>When we change an element or add another element to the </span><code>items</code><span> list, calling </span><code>render()</code><span> only redraws the changed or new element. The other list items are not modified.</span></p><p><span>Note that nested template literals must also have the </span><code>r</code><span> prefix. Otherwise they&#39;ll be rendered as escaped text instead of HTML elements.</span></p><h3 id='scoped-styles'><span>Scoped Styles</span></h3><p><span>Html with </span><code>style</code><span> elements will be rewritten so that the </span><code>:host</code><span> selector applies to the root element. This allows an element to specify styles that will apply only to itself and its children, while still inheriting styles from the rest of the document.</span></p><p><span>These local, &quot;scoped&quot; styles are implemented by:</span></p><ol start='' ><li><p><span>Adding a </span><code>data-style</code><span> attribute to the root element with a unique, incrementing id value for each instance.</span></p></li><li><p><span>Replacing any </span><code>:host</code><span> selectors inside the style with </span><code>element-name[data-style=&quot;1&quot;]</code><span>. For example the </span><code>:host</code><span> selector below becomes </span><code>fancy-text[data-style=&quot;1&quot;]</code><span>.</span></p></li></ol><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
718
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">FancyText</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;fancy-text&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;style&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">:host { display: block; border: 10px dashed red } </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">:host p { text-shadow: 0 0 3px #f40 } </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/style&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;p&gt;I have a red border and shadow!&lt;/p&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/fancy-text&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-comment">/* The code above is rewritten as:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; &lt;fancy-text data-style="1"&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;style&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fancy-text[data-style="1"] { display: block; border: 10px dashed red } </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fancy-text[data-style="1"] p { text-shadow: 0 0 3px #f40 } </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/style&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;I have a red border and shadow!&lt;/p&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; &lt;/fancy-text&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment"> &nbsp; &nbsp; &nbsp; */</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'fancy-text'</span>, <span class="cm-variable">FancyText</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">el</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">FancyText</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">el</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">el</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 473px;"></div><div class="CodeMirror-gutters" style="display: none; height: 473px;"></div></div></div></pre><p><span>Note that if shadow-dom is used, the element will not replace the </span><code>:host</code><span> selector in styles, as browsers natively support the </span><code>:host</code><span> selector when inside shadow DOM.</span></p><h3 id='child-components'><span>Child Components</span></h3><p><span>When one web component is embedded within another, its attributes and children are passed as arguments to the constructor:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
719
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">NotesItem</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-comment">// Constructor receives item object from attributes.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>({<span class="cm-def">item</span>}, <span class="cm-def">children</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">item</span> <span class="cm-operator">=</span> <span class="cm-variable-2">item</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>({<span class="cm-def">item</span>}<span class="cm-operator">=</span>{}) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-comment">// If item passed to the constructor has changed.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">if</span> (<span class="cm-variable-2">item</span>)</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">item</span> <span class="cm-operator">=</span> <span class="cm-variable-2">item</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;notes-item&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> &nbsp; <span class="cm-string-2">&lt;b&gt;${</span><span class="cm-keyword">this</span>.<span class="cm-property">item</span>.<span class="cm-property">name</span><span class="cm-string-2">}&lt;/b&gt; - ${</span><span class="cm-keyword">this</span>.<span class="cm-property">item</span>.<span class="cm-property">description</span><span class="cm-string-2">}&lt;br&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;/notes-item&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'notes-item'</span>, <span class="cm-variable">NotesItem</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
720
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">NotesList</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;notes-list&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=&gt;</span> <span class="cm-comment">// Pass item object to NotesItem constructor:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span><span class="cm-string-2">`&lt;notes-item item=${</span><span class="cm-variable-2">item</span><span class="cm-string-2">}"&gt;&lt;/notes-item&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>)<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;/notes-list&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'notes-list'</span>, <span class="cm-variable">NotesList</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
721
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">list</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">NotesList</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span> <span class="cm-operator">=</span> [</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>{</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">name</span>: <span class="cm-string">'English'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">description</span>: <span class="cm-string">'See spot run.'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>},</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>{</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">name</span>: <span class="cm-string">'Science'</span>,</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">description</span>: <span class="cm-string">'Snails are mollusks.'</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">]</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">list</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
722
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span>[<span class="cm-number">0</span>].<span class="cm-property">name</span> <span class="cm-operator">=</span> <span class="cm-string">'PhysEd'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
723
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// list.items[0] has changed, </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// so this will call render() on the first NotesItem, </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// passing the new item object to its render() function.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
724
- </span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 973px;"></div><div class="CodeMirror-gutters" style="display: none; height: 973px;"></div></div></div></pre><p><span>Calling </span><code>render()</code><span> on a parent component will call </span><code>render()</code><span> on child components if the attributes passed to the child component have changed. The new attributes will be passed as an object as the first argument to the child component&#39;s </span><code>render()</code><span> function. The </span><code>render()</code><span> function can then decide what to do with that data, and if it should re-render itself by calling </span><code>r(this)</code><span>, which will in turn call </span><code>render()</code><span> on its own child web components.</span></p><p><span>In the above code, we alternatively could&#39;ve created the </span><code>&lt;notes-item&gt;</code><span> element via the </span><code>new</code><span> keyword, but doing so would cause all </span><code>NotesItem</code><span> components to be recreated on every render.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="JavaScript"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">NotesList</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;notes-list&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=&gt;</span> <span class="cm-comment">// Pass item object to NotesItem constructor:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">new</span> <span class="cm-variable">NotesItem</span>({<span class="cm-property">item</span>: <span class="cm-variable-2">item</span>})</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span>)<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;/notes-list&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 176px;"></div><div class="CodeMirror-gutters" style="display: none; height: 176px;"></div></div></div></pre><p>&nbsp;</p><h3 id='the-r-function'><span>The r() function</span></h3><p><span>The </span><code>r()</code><span> function renders templates and elements. There are multiple ways to use the </span><code>r()</code><span> function:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="JavaScript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
725
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r`string`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Convert the html to a Template that can later be used to create nodes.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">template</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`Hello ${</span><span class="cm-string">"World"</span><span class="cm-string-2">}!`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
726
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r(HTMLElement, Template)</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Render the template created by #1 to the &lt;body&gt; tag.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">r</span>(<span class="cm-variable">document</span>.<span class="cm-property">body</span>, <span class="cm-variable">template</span>); &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
727
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r(Template):Node|HTMLElement</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Render Template created by #1 creating a standaline HTML Element</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">el</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>(<span class="cm-variable">template</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
728
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r(HTMLElement)`string`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Create template and render its nodes to el.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">r</span>(<span class="cm-variable">el</span>)<span class="cm-string-2">`&lt;b&gt;${</span><span class="cm-string">'Hi'</span><span class="cm-string-2">}&lt;/b&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
729
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r(html:string):TextNode</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Create single text node.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">textNode</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>(<span class="cm-string">'Hello'</span>); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
730
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r(html:string):HTMLElement</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Create single HTMLElement.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">el2</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>(<span class="cm-string">'&lt;b&gt;Hello&lt;/b&gt;'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
731
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r(html:string):DocumentFragment</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Create document fragment because there's more than one node.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">fragment</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>(<span class="cm-string">'Hello &lt;u&gt;Goodbye&lt;/u&gt;'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
732
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// r(function():Template, Object&lt;string, function|*&gt;):HTMLElement</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Crete a button element, with the fist function being the render function.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">button</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`&lt;button&gt;Submit&lt;/button&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">button</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
733
- </span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 656px;"></div><div class="CodeMirror-gutters" style="display: none; height: 656px;"></div></div></div></pre><h3 id='extending-other-dom-elements'><span>Extending Other DOM Elements.</span></h3><p><span>Suppose you want to use a custom component for each </span><code>&lt;tr&gt;</code><span> in a </span><code>&lt;table&gt;</code><span>. Html won&#39;t allow you to put just any element as a child of table or tbody. In this case you can make your web component inherit from the browser&#39;s built in </span><code>&lt;tr&gt;</code><span> element, by passing it as the third argument to </span><code>customElements.define</code><span>:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
734
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">LineItem</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">constructor</span>(<span class="cm-def">user</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">user</span> <span class="cm-operator">=</span> <span class="cm-variable-2">user</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> &nbsp; </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`<span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> &nbsp; </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;th&gt;${</span><span class="cm-keyword">this</span>.<span class="cm-property">user</span>.<span class="cm-property">name</span><span class="cm-string-2">}&lt;/td&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;td&gt;${</span><span class="cm-keyword">this</span>.<span class="cm-property">user</span>.<span class="cm-property">email</span><span class="cm-string-2">}&lt;/td&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
735
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'line-item'</span>, <span class="cm-variable">LineItem</span>, <span class="cm-variable">HTMLTableRowElement</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
736
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">table</span> <span class="cm-operator">=</span> <span class="cm-variable">document</span>.<span class="cm-property">createElement</span>(<span class="cm-string">'table'</span>)</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">for</span> (<span class="cm-keyword">let</span> <span class="cm-def">i</span><span class="cm-operator">=</span><span class="cm-number">0</span>; <span class="cm-variable-2">i</span><span class="cm-operator">&lt;</span><span class="cm-number">10</span>; <span class="cm-variable-2">i</span><span class="cm-operator">++</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">let</span> <span class="cm-def">user</span> <span class="cm-operator">=</span> {<span class="cm-property">name</span>: <span class="cm-string">'User '</span> <span class="cm-operator">+</span> <span class="cm-variable-2">i</span>, <span class="cm-property">email</span>: <span class="cm-string">'user'</span><span class="cm-operator">+</span><span class="cm-variable-2">i</span><span class="cm-operator">+</span><span class="cm-string">'@example.com'</span>};</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">table</span>.<span class="cm-property">append</span>(<span class="cm-keyword">new</span> <span class="cm-variable">LineItem</span>(<span class="cm-variable-2">user</span>));</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">table</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 414px;"></div><div class="CodeMirror-gutters" style="display: none; height: 414px;"></div></div></div></pre><h3 id='manual-dom-ops'><span>Manual DOM Ops</span></h3><p><span>You can perform manual DOM operations on your elements in these cases:</span></p><ol start='' ><li><p><span>Modify any attributes that are not created by expressions, on any nodes not created by expressions.</span></p></li><li><p><span>Add/remove nodes that:</span></p><ol start='' ><li><p><span>Are not created by an expression</span></p></li><li><p><span>Are not directly before or after an expression that creates nodes.</span></p></li><li><p><span>Do not have any attributes created by expressions.</span></p></li></ol></li><li><p><span>Modify any node, as long as you restore its previous position and attributes before </span><code>render()</code><span> is called again.</span></p></li></ol><p><span>This example creates a list inside a </span><code>div</code><span> element and demonstrates which manual DOM operations are allowed.</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
737
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">list</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span>({</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">items</span>: [],</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
738
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">add</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">push</span>(<span class="cm-string">'Item '</span> <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">length</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; },</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
739
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`&lt;div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; <span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;button onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">add</span><span class="cm-string-2">}&gt;Add Item&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; <span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;hr&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; <span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=&gt;</span> <span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; <span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;p&gt;${</span><span class="cm-variable-2">item</span><span class="cm-string-2">}&lt;/p&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; <span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">`</span>)<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/div&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">});</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
740
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">list</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
741
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Set attributes not created by expressions. This is allowed. </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">setAttribute</span>(<span class="cm-string">'title'</span>, <span class="cm-string">'DOM manipuulation demo'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'button'</span>).<span class="cm-property">setAttribute</span>(<span class="cm-string">'title'</span>, <span class="cm-string">'Click me'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
742
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Remove the &lt;hr&gt; element.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// This is fine, because the hr element isn't part of an expression.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// And isn't adjacent to an expression, because there's a whitespace</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// node between the &lt;hr&gt; and the expression.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// You could also put a comment node between them.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'hr'</span>).<span class="cm-property">remove</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
743
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Remove the first &lt;p&gt; element and add it back again.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// This is fine, because we put it back the way it was before render()</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">add</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">p</span> <span class="cm-operator">=</span> <span class="cm-variable">list</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'p'</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">append</span>(<span class="cm-variable">p</span>); <span class="cm-comment">// put it back.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
744
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// Remove the first &lt;p&gt; element.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// This will cause an error because we're modifying nodes created by an expression.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// list.querySelector('p').remove();</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// list.render();</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 779px;"></div><div class="CodeMirror-gutters" style="display: none; height: 779px;"></div></div></div></pre><p>&nbsp;</p><h3 id='the-solarite-class-experimental'><span>The Solarite Class (Experimental)</span></h3><p><span>Instead of inheriting from HTMLElement, you can inherit from the </span><code>Solarite</code><span> class, which will add a little bit of magic to your web component:</span></p><ol start='' ><li><p><code>render()</code><span> is automatically called when the element is added to the DOM, via a </span><code>connectedCallback()</code><span> function in the Solarite parent class.</span></p></li><li><p><code>customElements.define()</code><span> is automatically called when an element is instantiated via </span><code>new</code><span>. It defines the element name based on the class name, by converting the class name to a tag name with dashes, because browsers require all custom elements to have at least one dash within the name. If it can&#39;t find at least one place to put a dash, it will append </span><code>-element</code><span> to the end.</span></p></li></ol><p><span>If you want the component to have a tag name that&#39;s different than the name derived from the class name, you can pass a different name to </span><code>define()</code><span>:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>, <span class="cm-def">Solarite</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
745
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">TodoList</span> <span class="cm-keyword">extends</span> <span class="cm-variable">Solarite</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() { </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;todo-list&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">items</span>.<span class="cm-property">map</span>(<span class="cm-def">item</span> <span class="cm-operator">=&gt;</span> </span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span><span class="cm-string-2">`${</span><span class="cm-variable-2">item</span><span class="cm-string-2">}&lt;br&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/todo-list&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// This is called automatically when we extend from Solarite:</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">//customElements.define('todo-list', TodoList);</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
746
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">list</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">TodoList</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span> <span class="cm-operator">=</span> [<span class="cm-string">'one'</span>, <span class="cm-string">'two'</span>, <span class="cm-string">'three'</span>];</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">//list.render(); render() is called automatically when appended to body.</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">list</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
747
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">items</span>[<span class="cm-number">1</span>] <span class="cm-operator">=</span> <span class="cm-string">'2'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">list</span>.<span class="cm-property">render</span>();</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 373px;"></div><div class="CodeMirror-gutters" style="display: none; height: 373px;"></div></div></div></pre><h2 id='how-it-works'><span>How it works</span></h2><p><span>Suppose you&#39;re looping over an array of 10 objects and printing them to a list or table:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="javascript" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="javascript"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
748
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">MyTasks</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">tasks</span> <span class="cm-operator">=</span> [];</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">deleteTask</span>(<span class="cm-def">index</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">tasks</span>.<span class="cm-property">splice</span>(<span class="cm-variable-2">index</span>, <span class="cm-number">1</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" class="cm-tab-wrap-hack" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> <span class="cm-string-2">${</span><span class="cm-keyword">this</span>.<span class="cm-property">tasks</span>.<span class="cm-property">map</span>((<span class="cm-def">task</span>, <span class="cm-def">index</span>) <span class="cm-operator">=&gt;</span> &nbsp;<span class="cm-variable">r</span><span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;div&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> <span class="cm-string-2">${</span><span class="cm-variable-2">task</span><span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> <span class="cm-string-2">&lt;button onclick=${</span>() <span class="cm-operator">=&gt;</span> <span class="cm-keyword">this</span>.<span class="cm-property">deleteTask</span>(<span class="cm-variable-2">index</span>)<span class="cm-string-2">}&gt;Delete&lt;/button&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> <span class="cm-string-2">&lt;/div&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span> )<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-string-2">&lt;/div&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span>}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'my-tasks'</span>, <span class="cm-variable">MyTasks</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
749
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">let</span> <span class="cm-def">myTasks</span> <span class="cm-operator">=</span> <span class="cm-keyword">new</span> <span class="cm-variable">MyTasks</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">for</span> (<span class="cm-keyword">let</span> <span class="cm-def">i</span><span class="cm-operator">=</span><span class="cm-number">0</span>; <span class="cm-variable-2">i</span><span class="cm-operator">&lt;</span><span class="cm-number">10</span>; <span class="cm-variable-2">i</span><span class="cm-operator">++</span>)</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tab" role="presentation" cm-text=" "> </span><span class="cm-variable">myTasks</span>.<span class="cm-property">tasks</span>.<span class="cm-property">push</span>(<span class="cm-string">'Item '</span> <span class="cm-operator">+</span> <span class="cm-variable-2">i</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">myTasks</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">document</span>.<span class="cm-property">body</span>.<span class="cm-property">append</span>(<span class="cm-variable">myTasks</span>);</span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 507px;"></div><div class="CodeMirror-gutters" style="display: none; height: 507px;"></div></div></div></pre><p><span>When </span><code>render()</code><span> is called:</span></p><ol start='' ><li><p><span>Solarite&#39;s </span><code>r()</code><span> function gets the array of raw strings created by </span><code>tasks.map()</code><span> using a template literal function. </span></p></li><li><p><span>It then creates a hash of the value of every </span><code>${...}</code><span> expression given to the </span><code>r()</code><span> function.</span></p></li><li><p><span>Then it compares those hashes with the hashes from the last time rendering happened, and only update elements and attributes given values that have changed.</span></p></li></ol><p><span>Solarite uses </span><a href='https://github.com/WebReflection/udomdiff'><span>WebReflection/udomdiff</span></a><span> to compare DOM nodes to update.</span></p><h2 id='examples'><span>Examples</span></h2><p><span>This is the time example from Lit.js implemented with Solarite:</span></p><pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="html" style="break-inside: unset;"><div class="CodeMirror cm-s-inner cm-s-null-scroll CodeMirror-wrap" lang="html"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 6.41406px; left: 8px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: 0px; width: 0px;"></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">script</span> <span class="cm-attribute">type</span>=<span class="cm-string">"module"</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">import</span> {<span class="cm-def">r</span>, <span class="cm-def">getArg</span>} <span class="cm-keyword">from</span> <span class="cm-string">'./dist/Solarite.js'</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
750
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">replay</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`&lt;svg enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"&gt;&lt;title&gt;Replay&lt;/title&gt;&lt;g&gt;&lt;rect fill="none" height="24" width="24"/&gt;&lt;rect fill="none" height="24" width="24"/&gt;&lt;rect fill="none" height="24" width="24"/&gt;&lt;/g&gt;&lt;g&gt;&lt;g/&gt;&lt;path d="M12,5V1L7,6l5,5V7c3.31,0,6,2.69,6,6s-2.69,6-6,6s-6-2.69-6-6H4c0,4.42,3.58,8,8,8s8-3.58,8-8S16.42,5,12,5z"/&gt;&lt;/g&gt;&lt;/svg&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">pause</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`&lt;svg height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"&gt;&lt;title&gt;Pause&lt;/title&gt;&lt;path d="M0 0h24v24H0V0z" fill="none"/&gt;&lt;path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/&gt;&lt;/svg&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-def">play</span> <span class="cm-operator">=</span> <span class="cm-variable">r</span><span class="cm-string-2">`&lt;svg height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"&gt;&lt;title&gt;Play&lt;/title&gt;&lt;path d="M0 0h24v24H0V0z" fill="none"/&gt;&lt;path d="M10 8.64L15.27 12 10 15.36V8.64M8 5v14l11-7L8 5z"/&gt;&lt;/svg&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
751
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">class</span> <span class="cm-def">MyTimer</span> <span class="cm-keyword">extends</span> <span class="cm-variable">HTMLElement</span> {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">constructor</span>({<span class="cm-def">duration</span>}<span class="cm-operator">=</span>{}) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">super</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">duration</span> <span class="cm-operator">=</span> <span class="cm-variable">getArg</span>(<span class="cm-keyword">this</span>, <span class="cm-string">'duration'</span>, <span class="cm-variable-2">duration</span>)<span class="cm-operator">*</span><span class="cm-number">1</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">end</span> <span class="cm-operator">=</span> <span class="cm-atom">null</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">duration</span> <span class="cm-operator">*</span> <span class="cm-number">1000</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
752
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">render</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">const</span> <span class="cm-def">min</span> <span class="cm-operator">=</span> <span class="cm-variable">Math</span>.<span class="cm-property">floor</span>(<span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> <span class="cm-operator">/</span> <span class="cm-number">60000</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">const</span> <span class="cm-def">sec</span> <span class="cm-operator">=</span> <span class="cm-variable">pad</span>(<span class="cm-variable-2">min</span>, <span class="cm-variable">Math</span>.<span class="cm-property">floor</span>((<span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> <span class="cm-operator">/</span> <span class="cm-number">1000</span>) <span class="cm-operator">%</span> <span class="cm-number">60</span>));</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">const</span> <span class="cm-def">hun</span> <span class="cm-operator">=</span> <span class="cm-variable">pad</span>(<span class="cm-atom">true</span>, <span class="cm-variable">Math</span>.<span class="cm-property">floor</span>((<span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> <span class="cm-operator">%</span> <span class="cm-number">1000</span>) <span class="cm-operator">/</span> <span class="cm-number">10</span>));</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">r</span>(<span class="cm-keyword">this</span>)<span class="cm-string-2">`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;my-timer&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">${</span><span class="cm-variable-2">min</span> <span class="cm-operator">?</span> <span class="cm-string-2">`${</span><span class="cm-variable-2">min</span><span class="cm-string-2">}:${</span><span class="cm-variable-2">sec</span><span class="cm-string-2">}`</span> : <span class="cm-string-2">`${</span><span class="cm-variable-2">sec</span><span class="cm-string-2">}.${</span><span class="cm-variable-2">hun</span><span class="cm-string-2">}`}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;footer&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;style&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">:host { display: inline-block; min-width: 90px; font-size: 30px; text-align: center; padding: 0.2em; margin: 0.2em 0.1em;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">footer { user-select: none } &nbsp; &nbsp; &nbsp; &nbsp;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/style&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">${</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> <span class="cm-operator">===</span> <span class="cm-number">0</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-operator">?</span> <span class="cm-string">''</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : <span class="cm-keyword">this</span>.<span class="cm-property">running</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-operator">?</span> <span class="cm-variable">r</span><span class="cm-string-2">`&lt;span onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">pause</span><span class="cm-string-2">}&gt;${</span><span class="cm-variable">pause</span><span class="cm-string-2">}&lt;/span&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : <span class="cm-variable">r</span><span class="cm-string-2">`&lt;span onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">start</span><span class="cm-string-2">}&gt;${</span><span class="cm-variable">play</span><span class="cm-string-2">}&lt;/span&gt;`</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">}</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;span onclick=${</span><span class="cm-keyword">this</span>.<span class="cm-property">reset</span><span class="cm-string-2">}&gt;${</span><span class="cm-variable">replay</span><span class="cm-string-2">}&lt;/span&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/footer&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-string-2">&lt;/my-timer&gt;`</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
753
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">start</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">end</span> <span class="cm-operator">=</span> <span class="cm-variable">Date</span>.<span class="cm-property">now</span>() <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-property">remaining</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">tick</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
754
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">pause</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">end</span> <span class="cm-operator">=</span> <span class="cm-atom">null</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
755
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">reset</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">duration</span> <span class="cm-operator">*</span> <span class="cm-number">1000</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">end</span> <span class="cm-operator">=</span> <span class="cm-keyword">this</span>.<span class="cm-property">running</span> <span class="cm-operator">?</span> <span class="cm-variable">Date</span>.<span class="cm-property">now</span>() <span class="cm-operator">+</span> <span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> : <span class="cm-atom">null</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
756
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-property">tick</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">if</span> (<span class="cm-keyword">this</span>.<span class="cm-property">running</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">remaining</span> <span class="cm-operator">=</span> <span class="cm-variable">Math</span>.<span class="cm-property">max</span>(<span class="cm-number">0</span>, <span class="cm-keyword">this</span>.<span class="cm-property">end</span> <span class="cm-operator">-</span> <span class="cm-variable">Date</span>.<span class="cm-property">now</span>());</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">this</span>.<span class="cm-property">render</span>();</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-variable">requestAnimationFrame</span>(() <span class="cm-operator">=&gt;</span> <span class="cm-keyword">this</span>.<span class="cm-property">tick</span>());</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
757
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-keyword">get</span> <span class="cm-property">running</span>() {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp; &nbsp; &nbsp;<span class="cm-keyword">return</span> <span class="cm-keyword">this</span>.<span class="cm-property">end</span> <span class="cm-operator">&amp;&amp;</span> <span class="cm-keyword">this</span>.<span class="cm-property">remaining</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; }</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">customElements</span>.<span class="cm-property">define</span>(<span class="cm-string">'my-timer'</span>, <span class="cm-variable">MyTimer</span>);</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="" cm-zwsp="">
758
- </span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">function</span> <span class="cm-def">pad</span>(<span class="cm-def">pad</span>, <span class="cm-def">val</span>) {</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-keyword">return</span> <span class="cm-variable-2">pad</span> <span class="cm-operator">?</span> <span class="cm-variable">String</span>(<span class="cm-variable-2">val</span>).<span class="cm-property">padStart</span>(<span class="cm-number">2</span>, <span class="cm-string">'0'</span>) : <span class="cm-variable-2">val</span>;</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}</span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;/</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">my-timer</span> <span class="cm-attribute">duration</span>=<span class="cm-string">"7"</span><span class="cm-tag cm-bracket">&gt;&lt;/</span><span class="cm-tag">my-timer</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">my-timer</span> <span class="cm-attribute">duration</span>=<span class="cm-string">"60"</span><span class="cm-tag cm-bracket">&gt;&lt;/</span><span class="cm-tag">my-timer</span><span class="cm-tag cm-bracket">&gt;</span></span></pre><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-tag cm-bracket">&lt;</span><span class="cm-tag">my-timer</span> <span class="cm-attribute">duration</span>=<span class="cm-string">"300"</span><span class="cm-tag cm-bracket">&gt;&lt;/</span><span class="cm-tag">my-timer</span><span class="cm-tag cm-bracket">&gt;</span></span></pre></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 1481px;"></div><div class="CodeMirror-gutters" style="display: none; height: 1481px;"></div></div></div></pre><p>&nbsp;</p><h2 id='upcoming-features'><span>Upcoming Features</span></h2><p><span>These are possible features to come:</span></p><ol start='' ><li><p><span>Optional shadow DOM support</span></p></li><li><p><span>Optional JSX support</span></p></li><li><p><span>Option to render automatically when properties change, without calling render()</span></p></li><li><p><span>Faster rendering performance.</span></p></li></ol></div></div>
759
-
760
- <script>(function(){function e(e,n,i){document.addEventListener(e,function(e){if(!e.defaultPrevented)for(var t=e.target;t&&t!=this;t=t.parentNode)if(t.matches(n)){!1===i.call(t,e)&&(e.preventDefault(),e.stopPropagation());break}},!1)}var t=document.body.parentElement,i=[],r=null,o=document.body.classList.contains("typora-export-collapse-outline");function a(){return t.scrollTop}e("click",".outline-expander",function(e){var t=this.closest(".outline-item-wrapper").classList;return t.contains("outline-item-open")?t.remove("outline-item-open"):t.add("outline-item-open"),u(),!1}),e("click",".outline-item",function(e){var t=this.querySelector(".outline-label");location.hash="#"+t.getAttribute("href"),o&&((t=this.closest(".outline-item-wrapper").classList).contains("outline-item-open")||t.add("outline-item-open"),d(),t.add("outline-item-active"))});function s(){var e=a();r=null;for(var t=0;t<i.length&&i[t][1]-e<60;t++)r=i[t]}function n(){c=setTimeout(function(){var n;i=[],n=a(),document.querySelector("#write").querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(e=>{var t=e.getAttribute("id");i.push([t,n+e.getBoundingClientRect().y])}),s(),u()},300)}var l,c,d=function(){document.querySelectorAll(".outline-item-active").forEach(e=>e.classList.remove("outline-item-active")),document.querySelectorAll(".outline-item-single.outline-item-open").forEach(e=>e.classList.remove("outline-item-open"))},u=function(){if(r&&(d(),t=document.querySelector('.outline-label[href="#'+(CSS.escape?CSS.escape(r[0]):r[0])+'"]')))if(o){var e=t.closest(".outline-item-open>ul>.outline-item-wrapper");if(e)e.classList.add("outline-item-active");else{for(var t,n=(t=t.closest(".outline-item-wrapper")).parentElement.closest(".outline-item-wrapper");n;)n=(t=n).parentElement.closest(".outline-item-wrapper");t.classList.add("outline-item-active")}}else t.closest(".outline-item-wrapper").classList.add("outline-item-active")};window.addEventListener("scroll",function(e){l&&clearTimeout(l),l=setTimeout(function(){s(),u()},300)});window.addEventListener("resize",function(e){c&&clearTimeout(c),n()}),n()})();</script></body>
761
- </html>