@epa-wg/custom-element-dist 0.0.26 → 0.0.28

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 (216) hide show
  1. package/.storybook/main.ts +2 -2
  2. package/.storybook/preview.ts +1 -1
  3. package/README.md +4 -4
  4. package/bin/vitest/vitest-browser-importmaps.mjs +20 -20
  5. package/coverage/coverage-final.json +22 -22
  6. package/coverage/index.html +26 -26
  7. package/coverage/src/custom-element/coverage.svg +1 -1
  8. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  9. package/coverage/src/custom-element/custom-element.js.html +662 -380
  10. package/coverage/src/custom-element/demo/index.html +1 -1
  11. package/coverage/src/custom-element/demo/z.js.html +1 -1
  12. package/coverage/src/custom-element/http-request.js.html +12 -12
  13. package/coverage/src/custom-element/index.html +21 -21
  14. package/coverage/src/custom-element/local-storage.js.html +78 -63
  15. package/coverage/src/custom-element/location-element.js.html +4 -4
  16. package/coverage/src/custom-element/module-url.js/coverage.svg +1 -1
  17. package/coverage/src/custom-element/module-url.js.html +16 -10
  18. package/coverage/src/index.html +1 -1
  19. package/coverage/src/mocks/handlers.ts.html +1 -1
  20. package/coverage/src/mocks/index.html +1 -1
  21. package/coverage/src/stories/attributes.test.stories.ts.html +17 -11
  22. package/coverage/src/stories/coverage.svg +1 -1
  23. package/coverage/src/stories/css.test.stories.ts.html +8 -2
  24. package/coverage/src/stories/dom-merge.test.stories.ts.html +17 -11
  25. package/coverage/src/stories/external-template.test.stories.ts.html +13 -10
  26. package/coverage/src/stories/form.test.stories.ts.html +8 -2
  27. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  28. package/coverage/src/stories/index.html +26 -26
  29. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  30. package/coverage/src/stories/local-storage.test.stories.ts.html +106 -76
  31. package/coverage/src/stories/location-element.test.stories.ts.html +8 -2
  32. package/coverage/src/stories/module-url.test.stories.ts.html +8 -2
  33. package/coverage/src/stories/set-url.test.stories.ts.html +8 -2
  34. package/coverage/src/stories/slice-events.test.stories.ts.html +8 -2
  35. package/coverage/src/stories/slots.test.stories.ts.html +8 -2
  36. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  37. package/coverage/src/stories/version-select.test.stories.ts.html +8 -2
  38. package/coverage/src/sum.ts.html +1 -1
  39. package/dist/custom-element-BOIPgtxz.js +565 -0
  40. package/dist/custom-element-CUsSENWc.cjs +97 -0
  41. package/dist/custom-element-bundle.cjs +1 -1
  42. package/dist/custom-element-bundle.js +25 -21
  43. package/dist/demo/a.svg +27 -0
  44. package/dist/demo/demo.css +6 -7
  45. package/dist/demo/external-template.html +3 -3
  46. package/dist/demo/npm-versions-demo.html +21 -8
  47. package/dist/demo/npm-versions.html +54 -25
  48. package/dist/demo/s.xml +11 -21
  49. package/dist/demo/s.xslt +16 -74
  50. package/dist/demo/s1.xslt +59 -59
  51. package/dist/demo/ss.html +24 -57
  52. package/dist/demo/z.html +33 -62
  53. package/dist/demo/z.xml +59 -59
  54. package/dist/demo/z1.html +34 -0
  55. package/dist/local-storage-78EivJ_B.cjs +1 -0
  56. package/dist/local-storage-DzmNKzgN.js +66 -0
  57. package/dist/mockServiceWorker.js +1 -1
  58. package/package.json +27 -25
  59. package/public/demo/a.svg +27 -0
  60. package/public/demo/demo.css +6 -7
  61. package/public/demo/external-template.html +3 -3
  62. package/public/demo/npm-versions-demo.html +21 -8
  63. package/public/demo/npm-versions.html +54 -25
  64. package/public/demo/s.xml +11 -21
  65. package/public/demo/s.xslt +16 -74
  66. package/public/demo/s1.xslt +59 -59
  67. package/public/demo/ss.html +24 -57
  68. package/public/demo/z.html +33 -62
  69. package/public/demo/z.xml +59 -59
  70. package/public/demo/z1.html +34 -0
  71. package/public/mockServiceWorker.js +1 -1
  72. package/src/custom-element/custom-element.js +123 -29
  73. package/src/custom-element/demo/a.svg +27 -0
  74. package/src/custom-element/demo/demo.css +6 -7
  75. package/src/custom-element/demo/external-template.html +3 -3
  76. package/src/custom-element/demo/npm-versions-demo.html +21 -8
  77. package/src/custom-element/demo/npm-versions.html +54 -25
  78. package/src/custom-element/demo/s.xml +11 -21
  79. package/src/custom-element/demo/s.xslt +16 -74
  80. package/src/custom-element/demo/s1.xslt +59 -59
  81. package/src/custom-element/demo/ss.html +24 -57
  82. package/src/custom-element/demo/z.html +33 -62
  83. package/src/custom-element/demo/z.xml +59 -59
  84. package/src/custom-element/demo/z1.html +34 -0
  85. package/src/custom-element/ide/web-types-dce.json +1 -1
  86. package/src/custom-element/ide/web-types-xsl.json +1 -1
  87. package/src/custom-element/index.html +19 -2
  88. package/src/custom-element/local-storage.js +19 -14
  89. package/src/custom-element/module-url.js +3 -2
  90. package/src/dce-social-preview.png +0 -0
  91. package/src/material/angular.css +987 -0
  92. package/src/material/components/autocomplete.html +241 -0
  93. package/src/material/components/dropdown.html +115 -0
  94. package/src/material/components/menu.html +235 -0
  95. package/src/material/components.html +109 -0
  96. package/src/material/demo.css +31 -0
  97. package/src/material/index.html +169 -0
  98. package/src/material/material.css +357 -0
  99. package/src/material/theme/README.md +18 -0
  100. package/src/material/theme/semantic.css +112 -0
  101. package/src/mocks/versions.mock.ts +8 -8
  102. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  103. package/src/stories/attributes.test.stories.ts +6 -4
  104. package/src/stories/css.test.stories.ts +2 -0
  105. package/src/stories/dom-merge.test.stories.ts +11 -9
  106. package/src/stories/external-template.test.stories.ts +4 -3
  107. package/src/stories/form.test.stories.ts +2 -0
  108. package/src/stories/local-storage.test.stories.ts +63 -53
  109. package/src/stories/location-element.test.stories.ts +2 -0
  110. package/src/stories/module-url.test.stories.ts +2 -0
  111. package/src/stories/set-url.test.stories.ts +2 -0
  112. package/src/stories/slice-events.test.stories.ts +2 -0
  113. package/src/stories/slots.test.stories.ts +2 -0
  114. package/src/stories/version-select.test.stories.ts +2 -0
  115. package/src/sum.test.ts +5 -5
  116. package/src/sum.ts +3 -3
  117. package/storybook-static/assets/Color-ERTF36HU-ChyYtq0t.js +1 -0
  118. package/storybook-static/assets/Configure-CJVwFVjC.js +165 -0
  119. package/storybook-static/assets/DocsRenderer-CFRXHY34-Bz6q-OqD.js +2 -0
  120. package/storybook-static/assets/{attributes.test.stories-DIQXccHc.js → attributes.test.stories-BJBuuXgZ.js} +13 -14
  121. package/storybook-static/assets/{css.test.stories-BV2hi4CY.js → css.test.stories-pgbBc17d.js} +1 -1
  122. package/storybook-static/assets/custom-element-BDGsYgbP.js +97 -0
  123. package/storybook-static/assets/{dom-merge.test.stories-Dws0C2-g.js → dom-merge.test.stories-CXcYP_-J.js} +26 -24
  124. package/storybook-static/assets/entry-preview-C313OLrj.js +26 -0
  125. package/storybook-static/assets/{entry-preview-docs-BMKNVQXA.js → entry-preview-docs-B7ORr9w5.js} +2 -2
  126. package/storybook-static/assets/{external-template.test.stories-BHO48b0j.js → external-template.test.stories-CpJ68Ghy.js} +19 -20
  127. package/storybook-static/assets/{form.test.stories-dv9mwp24.js → form.test.stories-D35lyqd8.js} +2 -2
  128. package/storybook-static/assets/{handlers-CaCq2ZPF.js → handlers-B-OZtf2K.js} +13 -13
  129. package/storybook-static/assets/{http-request.stories-B2ke7LtS.js → http-request.stories-DccXgHyF.js} +6 -6
  130. package/storybook-static/assets/iframe-Ddc_axoC.js +2 -0
  131. package/storybook-static/assets/index-BSz1w4Gl.js +234 -0
  132. package/storybook-static/assets/index-BdcJ-iJ7.js +8 -0
  133. package/storybook-static/assets/index-CiCdFubk.js +634 -0
  134. package/storybook-static/assets/{index-Dz4OaB2k.js → index-f2MAjm2i.js} +1 -1
  135. package/storybook-static/assets/index-lY6s0fkU.js +1 -0
  136. package/storybook-static/assets/index-tfEkrhWr.js +1 -0
  137. package/storybook-static/assets/local-storage.test.stories-BY-PWhuk.js +420 -0
  138. package/storybook-static/assets/{location-element.test.stories-BiFvBop7.js → location-element.test.stories-3auBYEaU.js} +3 -3
  139. package/storybook-static/assets/{module-url.test.stories-BXoM34tX.js → module-url.test.stories-B7L9cL60.js} +6 -6
  140. package/storybook-static/assets/{preview-0Jj89qip.js → preview-BRPR-UXC.js} +1 -1
  141. package/storybook-static/assets/preview-BUQm51_C.js +52 -0
  142. package/storybook-static/assets/{preview-DB9FwMii.js → preview-BWzBA1C2.js} +1 -1
  143. package/storybook-static/assets/preview-BhhEZcNS.js +1 -0
  144. package/storybook-static/assets/preview-CcS4DQh8.js +1 -0
  145. package/storybook-static/assets/{preview-Cg7hXPRq.js → preview-CfH4_OzN.js} +2 -2
  146. package/storybook-static/assets/{preview-FpHGYA1q.js → preview-DHPc-V4N.js} +1 -1
  147. package/storybook-static/assets/preview-DYzi3Z2p.js +1 -0
  148. package/storybook-static/assets/{preview-4Up_z4Em.js → preview-caVMbCIR.js} +2 -2
  149. package/storybook-static/assets/preview-ncvtW_hb.js +34 -0
  150. package/storybook-static/assets/{set-url.test.stories-Cg5Z0r7x.js → set-url.test.stories-CuSuDLIx.js} +3 -3
  151. package/storybook-static/assets/{slice-events.test.stories-D_ttGp3g.js → slice-events.test.stories-BkRKsKem.js} +4 -4
  152. package/storybook-static/assets/{slots.test.stories-DBNXOm0T.js → slots.test.stories-BJCUWFkE.js} +8 -8
  153. package/storybook-static/assets/{version-select.test.stories-CgV3UCim.js → version-select.test.stories-B3ybJn_Z.js} +2 -2
  154. package/storybook-static/demo/a.svg +27 -0
  155. package/storybook-static/demo/demo.css +6 -7
  156. package/storybook-static/demo/external-template.html +3 -3
  157. package/storybook-static/demo/npm-versions-demo.html +21 -8
  158. package/storybook-static/demo/npm-versions.html +54 -25
  159. package/storybook-static/demo/s.xml +11 -21
  160. package/storybook-static/demo/s.xslt +16 -74
  161. package/storybook-static/demo/s1.xslt +59 -59
  162. package/storybook-static/demo/ss.html +24 -57
  163. package/storybook-static/demo/z.html +33 -62
  164. package/storybook-static/demo/z.xml +59 -59
  165. package/storybook-static/demo/z1.html +34 -0
  166. package/storybook-static/iframe.html +1 -1
  167. package/storybook-static/index.html +3 -7
  168. package/storybook-static/mockServiceWorker.js +1 -1
  169. package/storybook-static/project.json +1 -1
  170. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  171. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +9 -9
  172. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +76 -94
  173. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +1 -1
  174. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +1 -1
  175. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +1 -1
  176. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  177. package/storybook-static/sb-addons/interactions-9/manager-bundle.js +211 -0
  178. package/storybook-static/sb-addons/interactions-9/manager-bundle.js.LEGAL.txt +0 -0
  179. package/storybook-static/sb-manager/globals-module-info.js +11 -0
  180. package/storybook-static/sb-manager/globals-runtime.js +27803 -26928
  181. package/storybook-static/sb-manager/runtime.js +10341 -10136
  182. package/storybook-static/sb-preview/runtime.js +3841 -3828
  183. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  184. package/.idea/compiler.xml +0 -6
  185. package/.idea/custom-element-dist.iml +0 -13
  186. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  187. package/.idea/misc.xml +0 -6
  188. package/.idea/modules.xml +0 -8
  189. package/.idea/vcs.xml +0 -6
  190. package/.vscode/settings.json +0 -24
  191. package/dist/custom-element-CckoVsvO.cjs +0 -53
  192. package/dist/custom-element-b7c_7Kz4.js +0 -485
  193. package/dist/local-storage-Boafngui.cjs +0 -1
  194. package/dist/local-storage-BqDEu2kF.js +0 -59
  195. package/storybook-static/assets/Color-KGDBMAHA-CH-YyWYq.js +0 -1
  196. package/storybook-static/assets/Configure-DFL_bm2M.js +0 -173
  197. package/storybook-static/assets/DocsRenderer-PKQXORMH-Bz-_1hmS.js +0 -2
  198. package/storybook-static/assets/custom-element-wn23PUwN.js +0 -231
  199. package/storybook-static/assets/entry-preview-BKQ8UCxI.js +0 -8
  200. package/storybook-static/assets/iframe-D4Sos1HO.js +0 -2
  201. package/storybook-static/assets/index-BnXBQqj9.js +0 -605
  202. package/storybook-static/assets/index-C8k3Z-3Y.js +0 -28
  203. package/storybook-static/assets/index-Cpxqn5iQ.js +0 -1
  204. package/storybook-static/assets/index-DGdNYaqV.js +0 -8
  205. package/storybook-static/assets/index-sm7QlJZE.js +0 -1
  206. package/storybook-static/assets/lit-element-DzhCn-8W.js +0 -19
  207. package/storybook-static/assets/local-storage.test.stories-BpogLNq-.js +0 -419
  208. package/storybook-static/assets/preview-BJPLiuSt.js +0 -1
  209. package/storybook-static/assets/preview-BMWqy4Bi.js +0 -1
  210. package/storybook-static/assets/preview-BnWGZYux.js +0 -1
  211. package/storybook-static/assets/preview-Djh1_Tal.js +0 -20
  212. package/storybook-static/assets/preview-oHxXRSIu.js +0 -48
  213. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +0 -333
  214. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +0 -40
  215. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +0 -234
  216. /package/{storybook-static/sb-addons/interactions-10/manager-bundle.js.LEGAL.txt → src/material/guide/getting-started/index.html} +0 -0
package/public/demo/z.html CHANGED
@@ -1,62 +1,33 @@
1
- <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
2
- xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
3
- <location-element xmlns="" slice="window-url" live="" data-dce-id="2"></location-element>
4
- <table xmlns="" data-dce-id="3">
5
- <tbody data-dce-id="0-1">
6
- <tr data-dce-id="4">
7
- <th data-dce-id="5"><h3 data-dce-id="6"> URL properties </h3></th>
8
- <td data-dce-id="7">9</td>
9
- </tr>
10
- <tr data-dce-id="10">
11
- <th data-dce-id="11">href</th>
12
- <td data-dce-id="12">http://localhost:63342/custom-element/demo/a.html?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
13
- </tr>
14
- <tr data-dce-id="10-1">
15
- <th data-dce-id="11">origin</th>
16
- <td data-dce-id="12">http://localhost:63342</td>
17
- </tr>
18
- <tr data-dce-id="10-2">
19
- <th data-dce-id="11">protocol</th>
20
- <td data-dce-id="12">http:</td>
21
- </tr>
22
- <tr data-dce-id="10-3">
23
- <th data-dce-id="11">host</th>
24
- <td data-dce-id="12">localhost:63342</td>
25
- </tr>
26
- <tr data-dce-id="10-4">
27
- <th data-dce-id="11">hostname</th>
28
- <td data-dce-id="12">localhost</td>
29
- </tr>
30
- <tr data-dce-id="10-5">
31
- <th data-dce-id="11">port</th>
32
- <td data-dce-id="12">63342</td>
33
- </tr>
34
- <tr data-dce-id="10-6">
35
- <th data-dce-id="11">pathname</th>
36
- <td data-dce-id="12">/custom-element/demo/a.html</td>
37
- </tr>
38
- <tr data-dce-id="10-7">
39
- <th data-dce-id="11">search</th>
40
- <td data-dce-id="12">?_ijt=dmv0p4go000q47lg48i5im92f7&amp;_ij_reload=RELOAD_ON_SAVE</td>
41
- </tr>
42
- <tr data-dce-id="10-8">
43
- <th data-dce-id="11">hash</th>
44
- <td data-dce-id="12"></td>
45
- </tr>
46
- </tbody>
47
- </table>
48
- <h3 data-dce-id="9"> URL parameters </h3>
49
- <table xmlns="" data-dce-id="8">
50
-
51
- <tbody data-dce-id="0-1">
52
- <tr data-dce-id="10">
53
- <th data-dce-id="11">_ijt</th>
54
- <td data-dce-id="12">dmv0p4go000q47lg48i5im92f7</td>
55
- </tr>
56
- <tr data-dce-id="10-1">
57
- <th data-dce-id="11">_ij_reload</th>
58
- <td data-dce-id="12">RELOAD_ON_SAVE</td>
59
- </tr>
60
- </tbody>
61
- </table>
62
- </dce-root>
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>DOM merge - Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg"/>
7
+ <script type="importmap">
8
+ {
9
+ "imports": {
10
+ "@epa-wg/custom-element/": "../",
11
+ "@epa-wg/custom-element-dist/": "../"
12
+ }
13
+ }
14
+ </script>
15
+ <script type="module" src="../http-request.js"></script>
16
+ <script type="module" src="../location-element.js"></script>
17
+ <script type="module" src="../custom-element.js"></script>
18
+ <style>
19
+ @import "./demo.css";
20
+ dt{ font-weight: bold}
21
+ dd{ padding: 0;}
22
+ h1,h3{ margin: 0;}
23
+ nav{ gap:0; }
24
+ </style>
25
+ </head>
26
+ <body>
27
+
28
+ <custom-element src="./html-template.html#dwc-logo">
29
+ <template><i>loading SVG from templates file ...</i></template>
30
+ </custom-element>
31
+
32
+ </body>
33
+ </html>
package/public/demo/z.xml CHANGED
@@ -1,60 +1,60 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
- <location-element slice="window-url" data-dce-id="2"/>
4
- <table data-dce-id="3">
5
- <tr data-dce-id="4">
6
- <th data-dce-id="5">
7
- <u data-dce-id="6">URL properties</u>
8
- </th>
9
- </tr>
10
- <tr data-dce-id="7">
11
- <th data-dce-id="8">href</th>
12
- <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
13
- </tr>
14
- <tr data-dce-id="7">
15
- <th data-dce-id="8">origin</th>
16
- <td data-dce-id="9">http://localhost:63342</td>
17
- </tr>
18
- <tr data-dce-id="7">
19
- <th data-dce-id="8">protocol</th>
20
- <td data-dce-id="9">http:</td>
21
- </tr>
22
- <tr data-dce-id="7">
23
- <th data-dce-id="8">host</th>
24
- <td data-dce-id="9">localhost:63342</td>
25
- </tr>
26
- <tr data-dce-id="7">
27
- <th data-dce-id="8">hostname</th>
28
- <td data-dce-id="9">localhost</td>
29
- </tr>
30
- <tr data-dce-id="7">
31
- <th data-dce-id="8">port</th>
32
- <td data-dce-id="9">63342</td>
33
- </tr>
34
- <tr data-dce-id="7">
35
- <th data-dce-id="8">pathname</th>
36
- <td data-dce-id="9">/custom-element/demo/a.html</td>
37
- </tr>
38
- <tr data-dce-id="7">
39
- <th data-dce-id="8">search</th>
40
- <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
41
- </tr>
42
- <tr data-dce-id="7">
43
- <th data-dce-id="8">hash</th>
44
- <td data-dce-id="9"/>
45
- </tr>
46
- <tr data-dce-id="10">
47
- <th data-dce-id="11">
48
- <u data-dce-id="12">URL parameters</u>
49
- </th>
50
- </tr>
51
- <tr data-dce-id="13">
52
- <th data-dce-id="14">_ijt</th>
53
- <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
54
- </tr>
55
- <tr data-dce-id="13">
56
- <th data-dce-id="14">_ij_reload</th>
57
- <td data-dce-id="15">RELOAD_ON_SAVE</td>
58
- </tr>
59
- </table>
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <dce-root data-dce-id="1" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <location-element slice="window-url" data-dce-id="2"/>
4
+ <table data-dce-id="3">
5
+ <tr data-dce-id="4">
6
+ <th data-dce-id="5">
7
+ <u data-dce-id="6">URL properties</u>
8
+ </th>
9
+ </tr>
10
+ <tr data-dce-id="7">
11
+ <th data-dce-id="8">href</th>
12
+ <td data-dce-id="9">http://localhost:63342/custom-element/demo/a.html?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
13
+ </tr>
14
+ <tr data-dce-id="7">
15
+ <th data-dce-id="8">origin</th>
16
+ <td data-dce-id="9">http://localhost:63342</td>
17
+ </tr>
18
+ <tr data-dce-id="7">
19
+ <th data-dce-id="8">protocol</th>
20
+ <td data-dce-id="9">http:</td>
21
+ </tr>
22
+ <tr data-dce-id="7">
23
+ <th data-dce-id="8">host</th>
24
+ <td data-dce-id="9">localhost:63342</td>
25
+ </tr>
26
+ <tr data-dce-id="7">
27
+ <th data-dce-id="8">hostname</th>
28
+ <td data-dce-id="9">localhost</td>
29
+ </tr>
30
+ <tr data-dce-id="7">
31
+ <th data-dce-id="8">port</th>
32
+ <td data-dce-id="9">63342</td>
33
+ </tr>
34
+ <tr data-dce-id="7">
35
+ <th data-dce-id="8">pathname</th>
36
+ <td data-dce-id="9">/custom-element/demo/a.html</td>
37
+ </tr>
38
+ <tr data-dce-id="7">
39
+ <th data-dce-id="8">search</th>
40
+ <td data-dce-id="9">?_ijt=qca6trk5kne6eo4s4tomq4egmm&amp;_ij_reload=RELOAD_ON_SAVE</td>
41
+ </tr>
42
+ <tr data-dce-id="7">
43
+ <th data-dce-id="8">hash</th>
44
+ <td data-dce-id="9"/>
45
+ </tr>
46
+ <tr data-dce-id="10">
47
+ <th data-dce-id="11">
48
+ <u data-dce-id="12">URL parameters</u>
49
+ </th>
50
+ </tr>
51
+ <tr data-dce-id="13">
52
+ <th data-dce-id="14">_ijt</th>
53
+ <td data-dce-id="15">qca6trk5kne6eo4s4tomq4egmm</td>
54
+ </tr>
55
+ <tr data-dce-id="13">
56
+ <th data-dce-id="14">_ij_reload</th>
57
+ <td data-dce-id="15">RELOAD_ON_SAVE</td>
58
+ </tr>
59
+ </table>
60
60
  </dce-root>
package/public/demo/z1.html ADDED
@@ -0,0 +1,34 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>DOM merge - Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg"/>
7
+ <script type="importmap">
8
+ {
9
+ "imports": {
10
+ "@epa-wg/custom-element/": "../",
11
+ "@epa-wg/custom-element-dist/": "../"
12
+ }
13
+ }
14
+ </script>
15
+ <script type="module" src="../http-request.js"></script>
16
+ <script type="module" src="../location-element.js"></script>
17
+ <script type="module" src="../custom-element.js"></script>
18
+ <style>
19
+ @import "./demo.css";
20
+ dt{ font-weight: bold}
21
+ dd{ padding: 0;}
22
+ h1,h3{ margin: 0;}
23
+ nav{ gap:0; }
24
+ </style>
25
+ </head>
26
+ <body>
27
+ <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.27/storybook-static/index.html`">set in page URL</button>
28
+
29
+ <custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version"
30
+ package-name="@epa-wg/custom-element-dist"
31
+ ></custom-element>
32
+
33
+ </body>
34
+ </html>
package/public/mockServiceWorker.js CHANGED
@@ -8,7 +8,7 @@
8
8
  * - Please do NOT serve this file on production.
9
9
  */
10
10
 
11
- const PACKAGE_VERSION = '2.3.5'
11
+ const PACKAGE_VERSION = '2.4.5'
12
12
  const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
13
13
  const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
14
14
  const activeClientIds = new Set()
package/src/custom-element/custom-element.js CHANGED
@@ -47,6 +47,7 @@ xml2dom( xmlString )
47
47
  }
48
48
  export function
49
49
  xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
50
+ function x(doc) { return xmlString(doc) }
50
51
 
51
52
  function
52
53
  injectData( root, sectionName, arr, cb )
@@ -71,6 +72,12 @@ assureSlot( e )
71
72
  }
72
73
  return e;
73
74
  }
75
+ function
76
+ keepAttributes(e, aNames)
77
+ { e.getAttributeNames().forEach( n=> aNames.includes(n) || e.removeAttribute(n) ); }
78
+
79
+ export const
80
+ sanitizeBlankText = payload=> [...payload].filter(e=>!(e.nodeType===3 && e.data.trim() ==='' ));
74
81
 
75
82
  export function
76
83
  obj2node( o, tag, doc )
@@ -145,22 +152,72 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
145
152
  if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
146
153
  return tagUid(templateNode)
147
154
  const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >
148
- <xsl:output method="xml" />
149
- <xsl:template match="/"><dce-root xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*"/></dce-root></xsl:template>
150
- <xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
151
- <xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
152
- <xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
153
- <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]"><xsl:copy><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:copy></xsl:template>
154
- <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="@*"/><xsl:value-of select="text()"></xsl:value-of></xsl:element></xsl:template>
155
- <xsl:template mode="sanitize" match="*|@*"><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></xsl:template>
156
- <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
157
- <xsl:template mode="sanitize" match="text()"><dce-text><xsl:copy/></dce-text></xsl:template>
158
- <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></xsl:template>
159
- <xsl:template mode="sanitize" match="xhtml:*"><xsl:element name="{local-name()}"><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:element></xsl:template>
160
- </xsl:stylesheet>`)
155
+ <xsl:output method="xml"/>
156
+ <xsl:template match="/"><dce-root xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*" /></dce-root></xsl:template>
157
+ <xsl:template match="*[name()='template']">
158
+ <xsl:apply-templates mode="sanitize" select="*|text()"/>
159
+ </xsl:template>
160
+ <xsl:template match="*">
161
+ <xsl:apply-templates mode="sanitize" select="*|text()"/>
162
+ </xsl:template>
163
+ <xsl:template match="*[name()='svg']|*[name()='math']">
164
+ <xsl:apply-templates mode="sanitize" select="."/>
165
+ </xsl:template>
166
+ <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
167
+ <xsl:copy>
168
+ <xsl:apply-templates mode="sanitize" select="@*"/>
169
+ <xsl:value-of select="text()"></xsl:value-of>
170
+ </xsl:copy>
171
+ </xsl:template>
172
+ <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
173
+ <xsl:element name="{local-name()}">
174
+ <xsl:apply-templates mode="sanitize" select="@*"/>
175
+ <xsl:value-of select="text()"></xsl:value-of>
176
+ </xsl:element>
177
+ </xsl:template>
178
+ <xsl:template mode="sanitize" match="*|@*">
179
+ <xsl:copy>
180
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
181
+ </xsl:copy>
182
+ </xsl:template>
183
+ <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
184
+ <xsl:template mode="sanitize" match="text()">
185
+ <dce-text>
186
+ <xsl:copy/>
187
+ </dce-text>
188
+ </xsl:template>
189
+ <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
190
+ <xsl:copy>
191
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
192
+ </xsl:copy>
193
+ </xsl:template>
194
+ <xsl:template mode="sanitize" match="xhtml:*">
195
+ <xsl:element name="{local-name()}">
196
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
197
+ </xsl:element>
198
+ </xsl:template>
199
+ <xsl:template mode="sanitize" match="xhtml:input">
200
+ <xsl:element name="{local-name()}">
201
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
202
+ </xsl:element>
203
+ <xsl:for-each select="*">
204
+ <xsl:copy>
205
+ <xsl:attribute name="for" >^</xsl:attribute>
206
+ <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
207
+ </xsl:copy>
208
+ </xsl:for-each>
209
+ </xsl:template>
210
+ </xsl:stylesheet>`)
161
211
  const sanitizeProcessor = new XSLTProcessor()
162
212
  , tc = (n =>
163
213
  {
214
+ forEach$(n,'custom-element', ce=>{
215
+ if( 'template' === ce.firstElementChild.localName )
216
+ {
217
+ [...ce.firstElementChild.content.childNodes].forEach(n=>ce.append(n));
218
+ ce.firstElementChild.remove();
219
+ }
220
+ })
164
221
  forEach$(n,'script', s=> s.remove() );
165
222
  const xslRoot = n.content ?? n.firstElementChild?.content ?? n.body ?? n;
166
223
  xslTags.forEach( tag => forEach$( xslRoot, tag, el=>toXsl(el,xslRoot) ) );
@@ -223,12 +280,19 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
223
280
  , payload = $( xslDom, 'template[mode="payload"]');
224
281
  if( !fr )
225
282
  return console.error("transformation error",{ xml:tc.outerHTML, xsl: xmlString( sanitizeXsl ) });
283
+ if( 'dce-root'!==fr.firstElementChild.localName )
284
+ { const r = fr.ownerDocument.createElement('dce-root');
285
+ [...fr.childNodes].forEach(n=>r.append(n));
286
+ fr.append(r)
287
+ }
226
288
  const params = [];
227
289
  [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
228
290
  {
291
+ keepAttributes(a,'namespace,name,select');
229
292
  const p = cloneAs(a,'xsl:param')
230
293
  , name = attr(a,'name');
231
294
  payload.append(p);
295
+ keepAttributes(p,'select,name');
232
296
  let select = attr(p,'select')?.split('??')
233
297
  if( !select)
234
298
  { select = ['//'+name, `'${p.textContent}'`];
@@ -236,8 +300,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
236
300
  p.setAttribute('name',name);
237
301
  }
238
302
  let val;
239
- if( select?.length>1 ){
240
- p.removeAttribute('select');
303
+ if( select?.length>1 )
304
+ { p.removeAttribute('select');
241
305
  const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
242
306
  emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
243
307
  emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
@@ -270,7 +334,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
270
334
  for( let c of s.childNodes)
271
335
  v.lastElementChild.append(c)
272
336
  return v
273
- }
337
+ };
274
338
 
275
339
  forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
276
340
 
@@ -419,7 +483,8 @@ const loadTemplateRoots = async ( src, dce )=>
419
483
  if( hash )
420
484
  { const ret = dom.querySelectorAll('#'+hash);
421
485
  if( ret.length )
422
- return [...ret]
486
+ return [...ret];
487
+ console.error('template not found',src+'#'+hash);
423
488
  return [dce]
424
489
  }
425
490
  return [dom]
@@ -562,6 +627,8 @@ CustomElement extends HTMLElement
562
627
  static observedAttributes = ['src','tag','hidden'];
563
628
  async connectedCallback()
564
629
  {
630
+ if(this.firstElementChild && this.firstElementChild.localName !== 'template')
631
+ console.warn('custom-element used without template wrapping content\n', this.outerHTML);
565
632
  const templateRoots = await loadTemplateRoots( attr( this, 'src' ), this )
566
633
  , tag = attr( this, 'tag' )
567
634
  , tagName = tag ? tag : 'dce-'+crypto.randomUUID();
@@ -574,7 +641,13 @@ CustomElement extends HTMLElement
574
641
  this.append(s);
575
642
  })
576
643
  const templateDocs = templateRoots.map( n => createXsltFromDom( n ) )
577
- , xp = templateDocs.map( (td, p) =>{ p = new XSLTProcessor(); p.importStylesheet( td ); return p })
644
+ , xp = templateDocs.map( (td, p) =>
645
+ { p = new XSLTProcessor();
646
+ try{ p.importStylesheet( td ) }
647
+ catch( e )
648
+ { console.error(e, xmlString(td)) }
649
+ return p
650
+ })
578
651
 
579
652
  Object.defineProperty( this, "xsltString", { get: ()=>templateDocs.map( td => xmlString(td) ).join('\n') });
580
653
 
@@ -591,16 +664,16 @@ CustomElement extends HTMLElement
591
664
  static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
592
665
  #inTransform = 0;
593
666
  connectedCallback()
594
- { let payload = this.childNodes;
667
+ { let payload = sanitizeBlankText(this.childNodes);
595
668
  if( this.firstElementChild?.tagName === 'TEMPLATE' )
596
669
  {
597
670
  if( this.firstElementChild !== this.lastElementChild )
598
671
  { console.error('payload should have TEMPLATE as only child', this.outerHTML ) }
599
672
  const t = this.firstElementChild;
600
673
  t.remove();
601
- payload = t.content.childNodes;
674
+ payload = sanitizeBlankText(t.content.childNodes);
602
675
 
603
- for( const n of [...t.content.childNodes] )
676
+ for( const n of payload )
604
677
  if( n.localName === 'style' ){
605
678
  const id = assureUID(this,'data-dce-style')
606
679
  n.innerHTML= `${tagName}[data-dce-style="${id}"]{${n.innerHTML}}`;
@@ -675,18 +748,39 @@ CustomElement extends HTMLElement
675
748
  }
676
749
  })
677
750
 
751
+ function getSliceTarget(el)
752
+ { let r = el;
753
+ if( el.localName === 'slice')
754
+ { const ref= attr(el,'for');
755
+ if( !ref )
756
+ r = el.parentElement;
757
+ if( '^' === ref )
758
+ { do r = r.previousElementSibling;
759
+ while( r.localName === 'slice' )
760
+ } else
761
+ r = this.querySelector(ref)
762
+
763
+ if( !r )
764
+ return console.warn(`can not find selector in "slice for=${ref}" `, el.outerHTML);
765
+ attr(el,'slice') || el.setAttribute('slice', attr(el,'name'))
766
+ }
767
+ return r;
768
+ }
678
769
  forEach$( this,'[slice],[slice-event]', el =>
679
- { if( !el.dceInitialized )
770
+ { let evs = attr(el,'slice-event');
771
+ const sVal = el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value;
772
+ const tgt = getSliceTarget(el);
773
+ if( !el.dceInitialized )
680
774
  { el.dceInitialized = 1;
681
- let evs = attr(el,'slice-event');
682
- if( el.hasAttribute('custom-validity') )
775
+ if( tgt.hasAttribute('custom-validity') )
683
776
  evs += ' change submit';
684
777
 
685
778
  [...new Set((evs || 'change') .split(' '))]
686
- .forEach( t=> (el.localName==='slice'? el.parentElement : el)
687
- .addEventListener( t, ev=>
779
+ .forEach( t=>
780
+ tgt.addEventListener( t, ev=>
688
781
  { ev.sliceElement = el;
689
782
  ev.sliceEventSource = ev.currentTarget || ev.target;
783
+ ev.sliceProcessed = 0;
690
784
  const slices = event2slice( sliceRoot, attr( ev.sliceElement, 'slice'), ev, this );
691
785
 
692
786
  forEach$(this,'[custom-validity]',el =>
@@ -699,7 +793,7 @@ CustomElement extends HTMLElement
699
793
  }catch(err)
700
794
  { console.error(err, 'xPath', x) }
701
795
  })
702
- const x = attr(el,'custom-validity')
796
+ const x = attr(tgt,'custom-validity')
703
797
  , v = x && xPath( x, attrsRoot )
704
798
  , msg = v === true? '' : v;
705
799
 
@@ -725,8 +819,8 @@ CustomElement extends HTMLElement
725
819
  this.onSlice(ev);
726
820
  } ));
727
821
  if( !evs || evs.includes('init') )
728
- { if( el.hasAttribute('slice-value') || el.hasAttribute('value') || el.value )
729
- this.onSlice({type:'init', target: el, sliceElement:el, sliceEventSource:el })
822
+ { if( sVal )
823
+ this.onSlice({type:'init', target: tgt, sliceElement:el, sliceEventSource:tgt })
730
824
  else
731
825
  el.value = sliceXPath( attr(el,'slice') )
732
826
  }
package/src/custom-element/demo/a.svg ADDED
@@ -0,0 +1,27 @@
1
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
2
+ <defs>
3
+
4
+ </defs>
5
+ <polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
6
+ <path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
7
+ <path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
8
+ <path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
9
+ <path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
10
+ <path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
11
+ <path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
12
+ <path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
13
+ <path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
14
+ <path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
15
+ <path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
16
+ <path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
17
+ <path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
18
+ <path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
19
+ <path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
20
+ <path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
21
+ <path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
22
+ <path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
23
+ <path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
24
+ <path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
25
+ <path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
26
+ <path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
27
+ </svg>
package/src/custom-element/demo/demo.css CHANGED
@@ -4,13 +4,12 @@ html
4
4
  }
5
5
  body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
6
6
  body>*{flex: auto;}
7
- nav{ flex-direction: column;}
8
- custom-element+*,
9
- custom-element+*+*,
10
- custom-element:not([tag]),
11
- dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
12
- dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
13
- { box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
7
+ nav
8
+ { flex-direction: column;
9
+ dce-root{ box-shadow:none; padding: 0;}
10
+ }
11
+
12
+ html-demo-element *:has(>dce-root){ box-shadow: 0 0 0.5rem lime; padding: 1rem; flex:1; display: block; }
14
13
  script{ display:none !important; }
15
14
  dd{ padding: 1rem;}
16
15
  p{ margin: 0;}
package/src/custom-element/demo/external-template.html CHANGED
@@ -141,13 +141,13 @@
141
141
  <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
142
142
  <a href="html-template.html">html-template.html</a>
143
143
  <template>
144
- <custom-element src="html-template.html#wave">
144
+ <custom-element src="./html-template.html#wave">
145
145
  <template><i>loading HTML from templates file ...</i></template>
146
146
  </custom-element>
147
- <custom-element src="html-template.html#dwc-logo">
147
+ <custom-element src="./html-template.html#dwc-logo">
148
148
  <template><i>loading SVG from templates file ...</i></template>
149
149
  </custom-element>
150
- <custom-element src="html-template.html#sophomores-dream">
150
+ <custom-element src="./html-template.html#sophomores-dream">
151
151
  <template><i>loading MathML from HTML file ...</i></template>
152
152
  </custom-element>
153
153
  </template>