@epa-wg/custom-element-dist 0.0.25 → 0.0.27

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 (332) hide show
  1. package/.idea/custom-element-dist.iml +1 -5
  2. package/.storybook/main.ts +1 -3
  3. package/.storybook/preview-head.html +8 -0
  4. package/.storybook/preview.ts +13 -5
  5. package/README.md +4 -4
  6. package/bin/postinstall.sh +3 -2
  7. package/bin/vitest/vitest-browser-importmaps.mjs +20 -0
  8. package/coverage/coverage-final.json +14 -11
  9. package/coverage/index.html +51 -36
  10. package/coverage/src/custom-element/coverage.svg +1 -1
  11. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  12. package/coverage/src/custom-element/custom-element.js.html +596 -386
  13. package/coverage/src/custom-element/demo/coverage.svg +10 -0
  14. package/coverage/src/custom-element/demo/index.html +116 -0
  15. package/coverage/src/custom-element/demo/z.js/coverage.svg +10 -0
  16. package/coverage/src/custom-element/demo/z.js.html +112 -0
  17. package/coverage/src/custom-element/http-request.js.html +12 -12
  18. package/coverage/src/custom-element/index.html +33 -18
  19. package/coverage/src/custom-element/local-storage.js.html +56 -41
  20. package/coverage/src/custom-element/location-element.js.html +4 -4
  21. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  22. package/coverage/src/custom-element/module-url.js.html +187 -0
  23. package/coverage/src/index.html +1 -1
  24. package/coverage/src/mocks/coverage.svg +1 -1
  25. package/coverage/src/mocks/handlers.ts/coverage.svg +1 -1
  26. package/coverage/src/mocks/handlers.ts.html +36 -12
  27. package/coverage/src/mocks/index.html +19 -19
  28. package/coverage/src/stories/attributes.test.stories.ts.html +9 -15
  29. package/coverage/src/stories/coverage.svg +1 -1
  30. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  31. package/coverage/src/stories/dom-merge.test.stories.ts.html +15 -9
  32. package/coverage/src/stories/external-template.test.stories.ts.html +27 -18
  33. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  34. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  35. package/coverage/src/stories/index.html +48 -33
  36. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  37. package/coverage/src/stories/local-storage.test.stories.ts.html +87 -63
  38. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  39. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  40. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  41. package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
  42. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  43. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  44. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  45. package/coverage/src/stories/version-select.test.stories.ts.html +98 -20
  46. package/coverage/src/sum.ts.html +1 -1
  47. package/dist/confused.svg +1 -0
  48. package/dist/custom-element-BMMsP1Dy.js +533 -0
  49. package/dist/custom-element-CPSk7s0j.cjs +87 -0
  50. package/dist/custom-element-bundle.cjs +1 -1
  51. package/dist/custom-element-bundle.js +28 -25
  52. package/dist/demo/a.html +60 -0
  53. package/dist/demo/a.svg +27 -0
  54. package/dist/demo/b.html +13 -0
  55. package/dist/demo/confused.svg +38 -0
  56. package/dist/demo/data-slices.html +216 -0
  57. package/dist/demo/dce-social-preview.png +0 -0
  58. package/dist/demo/demo.css +25 -0
  59. package/dist/demo/dom-merge.html +123 -0
  60. package/dist/demo/embed-1.html +2 -0
  61. package/dist/demo/external-template.html +239 -0
  62. package/dist/demo/form.html +239 -0
  63. package/dist/demo/hex-grid-dce.html +183 -0
  64. package/dist/demo/hex-grid-transform.png +0 -0
  65. package/dist/demo/hex-grid.html +66 -0
  66. package/dist/demo/html-template.html +126 -0
  67. package/dist/demo/html-template.xhtml +45 -0
  68. package/dist/demo/html-template.xml +45 -0
  69. package/dist/demo/http-request.html +143 -0
  70. package/dist/demo/lib-dir/Smiley.svg +24 -0
  71. package/dist/demo/lib-dir/embed-lib.html +34 -0
  72. package/dist/demo/local-storage.html +218 -0
  73. package/dist/demo/location-element.html +168 -0
  74. package/dist/demo/logo.png +0 -0
  75. package/dist/demo/module-url.html +215 -0
  76. package/dist/demo/npm-versions-demo.html +118 -0
  77. package/dist/demo/npm-versions.html +94 -0
  78. package/dist/demo/parameters.html +70 -0
  79. package/dist/demo/s.xml +3 -0
  80. package/dist/demo/s.xslt +56 -0
  81. package/dist/demo/s1.xslt +60 -0
  82. package/dist/demo/scoped-css.html +169 -0
  83. package/dist/demo/set-url.html +141 -0
  84. package/dist/demo/ss.html +57 -0
  85. package/dist/demo/table.xml +25 -0
  86. package/dist/demo/table.xsl +293 -0
  87. package/dist/demo/template.xsl +46 -0
  88. package/dist/demo/tree.xml +25 -0
  89. package/dist/demo/tree.xsl +33 -0
  90. package/dist/demo/wc-square.svg +1 -0
  91. package/dist/demo/xhtml-template.xhtml +45 -0
  92. package/dist/demo/z.html +33 -0
  93. package/dist/demo/z.js +9 -0
  94. package/dist/demo/z.xml +60 -0
  95. package/dist/demo/z1.html +34 -0
  96. package/dist/embed-1.html +1 -2
  97. package/dist/local-storage-78EivJ_B.cjs +1 -0
  98. package/dist/local-storage-DzmNKzgN.js +66 -0
  99. package/dist/mockServiceWorker.js +1 -1
  100. package/package.json +95 -93
  101. package/public/confused.svg +1 -0
  102. package/public/demo/a.html +60 -0
  103. package/public/demo/a.svg +27 -0
  104. package/public/demo/b.html +13 -0
  105. package/public/demo/confused.svg +38 -0
  106. package/public/demo/data-slices.html +216 -0
  107. package/public/demo/dce-social-preview.png +0 -0
  108. package/public/demo/demo.css +25 -0
  109. package/public/demo/dom-merge.html +123 -0
  110. package/public/demo/embed-1.html +2 -0
  111. package/public/demo/external-template.html +239 -0
  112. package/public/demo/form.html +239 -0
  113. package/public/demo/hex-grid-dce.html +183 -0
  114. package/public/demo/hex-grid-transform.png +0 -0
  115. package/public/demo/hex-grid.html +66 -0
  116. package/public/demo/html-template.html +126 -0
  117. package/public/demo/html-template.xhtml +45 -0
  118. package/public/demo/html-template.xml +45 -0
  119. package/public/demo/http-request.html +143 -0
  120. package/public/demo/lib-dir/Smiley.svg +24 -0
  121. package/public/demo/lib-dir/embed-lib.html +34 -0
  122. package/public/demo/local-storage.html +218 -0
  123. package/public/demo/location-element.html +168 -0
  124. package/public/demo/logo.png +0 -0
  125. package/public/demo/module-url.html +215 -0
  126. package/public/demo/npm-versions-demo.html +118 -0
  127. package/public/demo/npm-versions.html +94 -0
  128. package/public/demo/parameters.html +70 -0
  129. package/public/demo/s.xml +3 -0
  130. package/public/demo/s.xslt +56 -0
  131. package/public/demo/s1.xslt +60 -0
  132. package/public/demo/scoped-css.html +169 -0
  133. package/public/demo/set-url.html +141 -0
  134. package/public/demo/ss.html +57 -0
  135. package/public/demo/table.xml +25 -0
  136. package/public/demo/table.xsl +293 -0
  137. package/public/demo/template.xsl +46 -0
  138. package/public/demo/tree.xml +25 -0
  139. package/public/demo/tree.xsl +33 -0
  140. package/public/demo/wc-square.svg +1 -0
  141. package/public/demo/xhtml-template.xhtml +45 -0
  142. package/public/demo/z.html +33 -0
  143. package/public/demo/z.js +9 -0
  144. package/public/demo/z.xml +60 -0
  145. package/public/demo/z1.html +34 -0
  146. package/public/embed-1.html +1 -2
  147. package/public/mockServiceWorker.js +1 -1
  148. package/src/custom-element/custom-element.js +103 -33
  149. package/src/custom-element/demo/a.svg +27 -0
  150. package/src/custom-element/demo/confused.svg +1 -0
  151. package/src/custom-element/demo/demo.css +11 -8
  152. package/src/custom-element/demo/embed-1.html +1 -2
  153. package/src/custom-element/demo/external-template.html +122 -62
  154. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  155. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  156. package/src/custom-element/demo/module-url.html +215 -0
  157. package/src/custom-element/demo/npm-versions-demo.html +118 -0
  158. package/src/custom-element/demo/npm-versions.html +94 -0
  159. package/src/custom-element/demo/s.xml +3 -36
  160. package/src/custom-element/demo/s.xslt +55 -96
  161. package/src/custom-element/demo/set-url.html +1 -1
  162. package/src/custom-element/demo/z.html +32 -61
  163. package/src/custom-element/demo/z.js +9 -0
  164. package/src/custom-element/demo/z1.html +34 -0
  165. package/src/custom-element/ide/customData-dce.json +215 -181
  166. package/src/custom-element/ide/web-types-dce.json +184 -159
  167. package/src/custom-element/ide/web-types-xsl.json +1 -1
  168. package/src/custom-element/index.html +21 -3
  169. package/src/custom-element/local-storage.js +19 -14
  170. package/src/custom-element/module-url.js +34 -0
  171. package/src/mocks/handlers.ts +10 -1
  172. package/src/mocks/versions.mock.ts +786 -0
  173. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  174. package/src/stories/attributes.test.stories.ts +3 -5
  175. package/src/stories/dom-merge.test.stories.ts +9 -7
  176. package/src/stories/external-template.test.stories.ts +13 -10
  177. package/src/stories/local-storage.test.stories.ts +61 -53
  178. package/src/stories/module-url.test.stories.ts +183 -0
  179. package/src/stories/version-select.test.stories.ts +38 -12
  180. package/src/sum.test.ts +5 -5
  181. package/src/sum.ts +3 -3
  182. package/storybook-static/assets/Color-KGDBMAHA-CJo5gHY3.js +1 -0
  183. package/storybook-static/assets/{Configure-D0qG3gR9.js → Configure-DdXbGKhY.js} +2 -2
  184. package/storybook-static/assets/DocsRenderer-PKQXORMH-DLnpL5hE.js +2 -0
  185. package/storybook-static/assets/{attributes.test.stories-W34tZdUt.js → attributes.test.stories-Bt5V18qO.js} +10 -12
  186. package/storybook-static/assets/{css.test.stories-BZFYx1TQ.js → css.test.stories-CGYy2daE.js} +1 -1
  187. package/storybook-static/assets/custom-element-D8hcDZHh.js +265 -0
  188. package/storybook-static/assets/{dom-merge.test.stories-S-7U5N3h.js → dom-merge.test.stories-XlsZ0UvX.js} +22 -20
  189. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  190. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  191. package/storybook-static/assets/{external-template.test.stories-QIO3lAFz.js → external-template.test.stories-Bt_Pflu8.js} +23 -21
  192. package/storybook-static/assets/{form.test.stories-ClYhj9F1.js → form.test.stories-B0NoI8wm.js} +1 -1
  193. package/storybook-static/assets/handlers-B5969HUu.js +467 -0
  194. package/storybook-static/assets/http-request.stories-B2skuTFV.js +281 -0
  195. package/storybook-static/assets/iframe-Dfrt81rk.js +2 -0
  196. package/storybook-static/assets/index-Ay195x2L.js +605 -0
  197. package/storybook-static/assets/index-C3ChPTMh.js +1 -0
  198. package/storybook-static/assets/index-C7lvoJNv.js +1 -0
  199. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  200. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  201. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  202. package/storybook-static/assets/index-Gpdhz4ab.js +1 -0
  203. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  204. package/storybook-static/assets/local-storage.test.stories-DfY6feqG.js +420 -0
  205. package/storybook-static/assets/{location-element.test.stories-DvH1TWK4.js → location-element.test.stories-944AotIJ.js} +1 -1
  206. package/storybook-static/assets/module-url.test.stories-DSKcwApl.js +208 -0
  207. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  208. package/storybook-static/assets/preview-AJR7rVPD.js +52 -0
  209. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  210. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  211. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  212. package/storybook-static/assets/preview-CadgX-4y.js +2 -0
  213. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  214. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  215. package/storybook-static/assets/{set-url.test.stories-GlJOh31I.js → set-url.test.stories-DjLHKkEh.js} +1 -1
  216. package/storybook-static/assets/{slice-events.test.stories-VoNjuPCX.js → slice-events.test.stories-8I_BrHd6.js} +1 -1
  217. package/storybook-static/assets/{slots.test.stories-Da2j9YuO.js → slots.test.stories-CvZz4jyP.js} +1 -1
  218. package/storybook-static/assets/version-select.test.stories-DSxmJylI.js +109 -0
  219. package/storybook-static/confused.svg +1 -0
  220. package/storybook-static/demo/a.html +60 -0
  221. package/storybook-static/demo/a.svg +27 -0
  222. package/storybook-static/demo/b.html +13 -0
  223. package/storybook-static/demo/confused.svg +38 -0
  224. package/storybook-static/demo/data-slices.html +216 -0
  225. package/storybook-static/demo/dce-social-preview.png +0 -0
  226. package/storybook-static/demo/demo.css +25 -0
  227. package/storybook-static/demo/dom-merge.html +123 -0
  228. package/storybook-static/demo/embed-1.html +2 -0
  229. package/storybook-static/demo/external-template.html +239 -0
  230. package/storybook-static/demo/form.html +239 -0
  231. package/storybook-static/demo/hex-grid-dce.html +183 -0
  232. package/storybook-static/demo/hex-grid-transform.png +0 -0
  233. package/storybook-static/demo/hex-grid.html +66 -0
  234. package/storybook-static/demo/html-template.html +126 -0
  235. package/storybook-static/demo/html-template.xhtml +45 -0
  236. package/storybook-static/demo/html-template.xml +45 -0
  237. package/storybook-static/demo/http-request.html +143 -0
  238. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  239. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  240. package/storybook-static/demo/local-storage.html +218 -0
  241. package/storybook-static/demo/location-element.html +168 -0
  242. package/storybook-static/demo/logo.png +0 -0
  243. package/storybook-static/demo/module-url.html +215 -0
  244. package/storybook-static/demo/npm-versions-demo.html +118 -0
  245. package/storybook-static/demo/npm-versions.html +94 -0
  246. package/storybook-static/demo/parameters.html +70 -0
  247. package/storybook-static/demo/s.xml +3 -0
  248. package/storybook-static/demo/s.xslt +56 -0
  249. package/storybook-static/demo/s1.xslt +60 -0
  250. package/storybook-static/demo/scoped-css.html +169 -0
  251. package/storybook-static/demo/set-url.html +141 -0
  252. package/storybook-static/demo/ss.html +57 -0
  253. package/storybook-static/demo/table.xml +25 -0
  254. package/storybook-static/demo/table.xsl +293 -0
  255. package/storybook-static/demo/template.xsl +46 -0
  256. package/storybook-static/demo/tree.xml +25 -0
  257. package/storybook-static/demo/tree.xsl +33 -0
  258. package/storybook-static/demo/wc-square.svg +1 -0
  259. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  260. package/storybook-static/demo/z.html +33 -0
  261. package/storybook-static/demo/z.js +9 -0
  262. package/storybook-static/demo/z.xml +60 -0
  263. package/storybook-static/demo/z1.html +34 -0
  264. package/storybook-static/embed-1.html +1 -2
  265. package/storybook-static/favicon.svg +1 -7
  266. package/storybook-static/iframe.html +42 -30
  267. package/storybook-static/index.html +36 -18
  268. package/storybook-static/index.json +1 -1
  269. package/storybook-static/mockServiceWorker.js +1 -1
  270. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  271. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  272. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  273. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  274. package/storybook-static/project.json +1 -1
  275. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +39 -36
  276. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +38 -1
  277. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  278. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  279. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  280. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  281. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  282. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  283. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  284. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  285. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  286. package/storybook-static/sb-manager/globals.js +48 -1
  287. package/storybook-static/sb-manager/runtime.js +11884 -1
  288. package/storybook-static/sb-preview/globals.js +33 -1
  289. package/storybook-static/sb-preview/runtime.js +9437 -108
  290. package/vite.config.js +2 -1
  291. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  292. package/.idea/compiler.xml +0 -6
  293. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  294. package/.vscode/settings.json +0 -24
  295. package/dist/custom-element-DAe7uvIt.js +0 -477
  296. package/dist/custom-element-DZvvhscI.cjs +0 -53
  297. package/dist/local-storage-Boafngui.cjs +0 -1
  298. package/dist/local-storage-BqDEu2kF.js +0 -59
  299. package/storybook-static/assets/Color-PRSJMWNM-CRSv4C7i.js +0 -1
  300. package/storybook-static/assets/DocsRenderer-K4EAMTCU-CG_P5zRZ.js +0 -2
  301. package/storybook-static/assets/WithTooltip-KJL26V4Q-CUqUi5E8.js +0 -1
  302. package/storybook-static/assets/custom-element-DpIq8E2p.js +0 -219
  303. package/storybook-static/assets/formatter-2WMMO6ZP-C-UiBIma.js +0 -58
  304. package/storybook-static/assets/http-request.stories-DCqY5s2i.js +0 -300
  305. package/storybook-static/assets/iframe-CURpvmVV.js +0 -2
  306. package/storybook-static/assets/index-CKw1EbdP.js +0 -1
  307. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  308. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  309. package/storybook-static/assets/index-DYpTqTNu.js +0 -1
  310. package/storybook-static/assets/index-DsWii_Ep.js +0 -548
  311. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  312. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  313. package/storybook-static/assets/local-storage.test.stories-BqgYwqr-.js +0 -419
  314. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  315. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  316. package/storybook-static/assets/preview-DRnyIGXK.js +0 -48
  317. package/storybook-static/assets/preview-DjDbQHPa.js +0 -2
  318. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-CDpEe51g.js +0 -1
  319. package/storybook-static/assets/version-select.test.stories-DLwf-TPB.js +0 -60
  320. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  321. package/storybook-static/sb-common-assets/fonts.css +0 -31
  322. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  323. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  324. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  325. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  326. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  327. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  328. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  329. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  330. package/storybook-static/sb-manager/index.js +0 -1
  331. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  332. /package/storybook-static/sb-addons/{storybook-core-server-presets-0 → storybook-core-core-server-presets-0}/common-manager-bundle.js.LEGAL.txt +0 -0
package/storybook-static/demo/local-storage.html ADDED
@@ -0,0 +1,218 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>custom-element Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg" />
7
+ <script type="module" src="../local-storage.js"></script>
8
+ <script type="module" src="../custom-element.js"></script>
9
+ <style>
10
+ @import "./demo.css";
11
+
12
+ button{ background: forestgreen; }
13
+ table{ min-width: 16rem; }
14
+ td{ border-bottom: 1px solid silver; }
15
+ tfoot td{ border-bottom: none; }
16
+ td,th{text-align: right; }
17
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
18
+ </style>
19
+
20
+ <script>
21
+ window.JsonSample = {a:1,b:'B'};
22
+ </script>
23
+ </head>
24
+ <body>
25
+
26
+ <nav>
27
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
28
+ </nav>
29
+ <main>
30
+ <code>local-storage</code> allows to read and write its value to the key in <code>localStorage</code>.
31
+ The <code>type</code> attribute allows to place the validation constrains to the value: when the value does not
32
+ match the expected type, it would not be assigned, keeping empty <code>value</code> instead.
33
+ </main>
34
+ <html-demo-element legend="0. read localStorage text value"
35
+ description="click should set text-key slice via localStorage change.">
36
+ <template>
37
+ <custom-element>
38
+ <template>
39
+ <local-storage key="textKey" slice="text-key" type="text" live="live"></local-storage>
40
+ <button onclick="localStorage.setItem('textKey','text value')">text value</button>
41
+ <button onclick="localStorage.setItem('textKey','another value')">another value</button>
42
+ //text-key: <code>{//text-key}</code>
43
+ </template>
44
+ </custom-element>
45
+ </template>
46
+ </html-demo-element>
47
+
48
+ <html-demo-element legend="1. always override "
49
+ description="value in localStorage[] should be always reset to ABC. click should set text-key slice via localStorage change.">
50
+ <template>
51
+ <custom-element>
52
+ <template>
53
+ <!-- always reset -->
54
+ <local-storage slice="override-key" key="overrideKey" type="text" value="ABC"></local-storage>
55
+ <button onclick="localStorage.setItem( 'overrideKey','text value')">text value</button>
56
+ <button onclick="localStorage.removeItem('overrideKey' )">clear key</button>
57
+ //override-key: <code>{ //override-key }</code>
58
+ </template>
59
+ </custom-element>
60
+ </template>
61
+ </html-demo-element>
62
+
63
+ <html-demo-element legend="2. from storage with default "
64
+ description="default overridden by button, refresh should preserve updated value">
65
+ <template>
66
+ <custom-element>
67
+ <template>
68
+ <!-- initially set value to DEF and update by button. On reload the value picked from localStorage -->
69
+ <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF'"></local-storage>
70
+ <button onclick="localStorage.clear()">clear localStorage</button>
71
+ <button onclick="localStorage.removeItem('attr2Key')">clear key</button>
72
+ <button onclick="localStorage.setItem('attr2Key','text value')">updated value</button>
73
+ //attr2-key: <code>{//attr2-key}</code>
74
+ </template>
75
+ </custom-element>
76
+ </template>
77
+ </html-demo-element>
78
+
79
+ <html-demo-element legend="3. localStorage type"
80
+ description="type validation happy path. Invalid for type value in storage would be treated as null">
81
+ <template>
82
+ <custom-element>
83
+ <template>
84
+ <local-storage key="dateKey" slice="date-key" type="date" live="live"></local-storage>
85
+ <local-storage key="timeKey" slice="time-key" type="time" live="live"></local-storage>
86
+ <local-storage key="localDateTimeKey" slice="local-date-time" type="datetime-local" live="live"></local-storage>
87
+ <local-storage key="numberKey" slice="number-key" type="number" live="live"></local-storage>
88
+ <local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
89
+ <input id="typesinput" placeholder="set value" /><button onclick="
90
+ 'dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
91
+ .map( k=> localStorage.setItem(k, typesinput.value) )
92
+ "> set to all</button><br/>
93
+ <hr/>
94
+ date-key:
95
+ <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')" >2024-04-21T03:58:42.131Z </button>
96
+ <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())" >now </button>
97
+ <button onclick="localStorage.setItem('dateKey', 'ABC' )" >date ABC - invalid </button>
98
+ <code>{//date-key }</code><br/>
99
+ time-key:
100
+ <button onclick="localStorage.setItem('timeKey', '13:30')" >13:30 </button>
101
+ <code>{//time-key }</code><br/>
102
+ local-date-time:
103
+ <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')" >21977-04-01T14:00:30 - local </button>
104
+ <code>{//local-date-time}</code><br/>
105
+ number-key:
106
+ <button onclick="localStorage.setItem('numberKey', '2024' )" >2024 - number </button>
107
+ <button onclick="localStorage.setItem('numberKey', '24' )" >24 - number </button>
108
+ <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )" >1.23456e+5 </button>
109
+ <button onclick="localStorage.setItem('numberKey', '0001' )" >0001 </button>
110
+ <button onclick="localStorage.setItem('numberKey', '000' )" >000 </button>
111
+ <button onclick="localStorage.setItem('numberKey', '0' )" >0 </button>
112
+ <button onclick="localStorage.setItem('numberKey', 'ABC' )" >ABC - invalid, NaN </button>
113
+ <code>{//number-key }</code> <br/>
114
+ <fieldset>
115
+ <legend>json-key: </legend>
116
+
117
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))" >'ABC' - string </button>
118
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))" >12.345 - number </button>
119
+ <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )" >a:1,b:'B' -json </button>
120
+ <button onclick="localStorage.setItem('jsonKey', 'ABC' )" >ABC - invalid </button><br/>
121
+ json-key:<code><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
122
+ </fieldset>
123
+ <xsl:template mode="json" match="*|@*">
124
+ <div>{name()} : {.}</div>
125
+ </xsl:template>
126
+ </template>
127
+ </custom-element>
128
+ </template>
129
+ </html-demo-element>
130
+
131
+ <html-demo-element legend="3. localStorage simplest"
132
+ description="local-storage read only during initial and only render, does not track the changes.">
133
+ <p>Has to produce 12🍒</p>
134
+ <template>
135
+ <custom-element tag="dce-1" hidden>
136
+ {//slice/fruits/text()}
137
+ <slot>🤔</slot>
138
+ <local-storage key="cherries" slice="fruits"></local-storage>
139
+ </custom-element>
140
+ <dce-1>🍒</dce-1>
141
+ </template>
142
+ </html-demo-element>
143
+
144
+ <html-demo-element legend="2. localStorage basket JSON "
145
+ description="local-storage tracks changes">
146
+ <p>Click the fruits button to add into cart </p>
147
+ <template>
148
+ <custom-element tag="dce-2" hidden>
149
+ <template>
150
+ <local-storage key="basket" slice="basket" live type="json"></local-storage>
151
+ <xhtml:table xmlns:xhtml="http://www.w3.org/1999/xhtml" >
152
+ <xhtml:tbody>
153
+ <for-each select="//basket/value/@*">
154
+ <xhtml:tr>
155
+ <xhtml:th> {name()} </xhtml:th>
156
+ <xhtml:td> {.} </xhtml:td>
157
+ </xhtml:tr>
158
+ </for-each>
159
+ </xhtml:tbody>
160
+ <xhtml:tfoot>
161
+ <xhtml:tr>
162
+ <xhtml:td><slot>🤔</slot></xhtml:td>
163
+ <xhtml:th> {sum(//slice/basket/value/@*)} </xhtml:th>
164
+ </xhtml:tr>
165
+ </xhtml:tfoot>
166
+ </xhtml:table>
167
+ </template>
168
+ </custom-element>
169
+ <dce-2>🛒total</dce-2>
170
+ </template>
171
+ </html-demo-element>
172
+
173
+ <fieldset>
174
+ <legend>localStorage content</legend>
175
+ <p>The demo should display count 1🍋 and 12🍒 initially.
176
+ The value in <code>localStorage</code> is incremented
177
+ when clicked on matching button
178
+ </p>
179
+ <button name="lemons" value="1" >🍋</button>
180
+ <button name="cherries" value="12" >🍒</button>
181
+ <button name="apple" >🍏</button>
182
+ <button name="banana" >🍌</button>
183
+ <table>
184
+ <caption> Click to add the localStorage value </caption>
185
+ <thead><tr><th>key</th><th>value</th></tr></thead>
186
+ <tbody id="local-storage-values"></tbody>
187
+ </table>
188
+ </fieldset>
189
+ <script type="module">
190
+ import { localStorageSetItem } from '../local-storage.js';
191
+ import $ from 'https://unpkg.com/css-chain@1/CssChain.js';
192
+
193
+ const basket = {cherries: 12, lemons:1 };
194
+ localStorageSetItem( 'basket', JSON.stringify(basket) );
195
+
196
+ $('button[name]')
197
+ .forEach( b=> localStorage.setItem( b.name, b.value ) )
198
+ .addEventListener( 'click', e =>
199
+ { const k = e.target.name;
200
+ basket[k] || (basket[k] = 1);
201
+ localStorageSetItem( k, basket[k] = 1+1*localStorage[k] )
202
+ localStorageSetItem( 'basket', JSON.stringify(basket) );
203
+ renderStorage();
204
+ } );
205
+
206
+ const renderStorage = () =>
207
+ window[ 'local-storage-values' ].innerHTML = [...Array(localStorage.length).keys()]
208
+ .map( k => `<tr><th>${ localStorage.key(k) }</th><td>${ localStorage.getItem( localStorage.key(k) ) }</td>` ).join( '\n' );
209
+
210
+ window.addEventListener( 'storage', renderStorage );
211
+ window.addEventListener( 'local-storage', renderStorage );
212
+ renderStorage();
213
+ </script>
214
+
215
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
216
+
217
+ </body>
218
+ </html>
package/storybook-static/demo/location-element.html ADDED
@@ -0,0 +1,168 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
3
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6
+ <title>custom-element Declarative Custom Element implementation demo</title>
7
+ <link rel="icon" href="./wc-square.svg" />
8
+ <script type="module" src="../location-element.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+
13
+ button{ background: forestgreen; }
14
+ table{ min-width: 16rem; }
15
+ td{ border-bottom: 1px solid silver; }
16
+ tfoot td{ border-bottom: none; }
17
+ td,th{text-align: right; }
18
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
19
+ </style>
20
+ </head>
21
+ <body>
22
+ <nav>
23
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
24
+ </nav>
25
+ <main>
26
+ <h3>How to get the page URL by location-element?</h3>
27
+ Answer: by defining following attributes:
28
+ <ol>
29
+ <li><code>slice</code> to one of values provided bellow</li>
30
+ <li><code>src</code> optionally with URL, If omitted, it would match the <code>window.location.href</code> </li>
31
+ </ol>
32
+ URL properties would be a part of slice data.
33
+ <p><a href="./set-url.html">Set page URL demo</a> </p>
34
+ </main>
35
+ <html-demo-element legend="Change window URL"
36
+ description="use browser URL bar or those controls to change the page URL"
37
+ >
38
+ <template>
39
+ <a href="#dce2">#dce2</a>
40
+ <form method="get">
41
+ <input name="p1" value="abc"/>
42
+ <input name="p2" value="def"/>
43
+ <input type="submit" value="params"/>
44
+ </form>
45
+ <button onclick="history.pushState( {},'', 'location-element.html?pushstate')"
46
+ >history.pushState</button>
47
+ <button onclick="history.replaceState( {},'', 'location-element.html?replaceState#dce1')"
48
+ >history.replaceState</button>
49
+
50
+ </template>
51
+ </html-demo-element>
52
+
53
+
54
+ <html-demo-element legend="1. window.location live update"
55
+ description="Change the window URL via link or history change by controls in #1.
56
+ Observe the changes detected by location-element slice."
57
+ id="dce2"
58
+ >
59
+ <p>Has to produce URL properties</p>
60
+ <template>
61
+ <custom-element tag="dce-2" hidden>
62
+ <template>
63
+
64
+ <location-element slice="window-url" live method="" src=""></location-element>
65
+
66
+ <xhtml:table>
67
+ <xhtml:tbody>
68
+ <xhtml:tr>
69
+ <xhtml:th><h3> URL properties </h3></xhtml:th>
70
+ <xhtml:td>{count(//value/@*)}</xhtml:td>
71
+ </xhtml:tr>
72
+ <apply-templates mode="attrs" select="//value/@*"></apply-templates>
73
+ </xhtml:tbody>
74
+ </xhtml:table>
75
+ <xhtml:table>
76
+ <tr><th><h3> URL parameters </h3></th></tr>
77
+ <apply-templates mode="attrs" select="//params/*/*"></apply-templates>
78
+ </xhtml:table>
79
+ <xsl:template mode="attrs" match="*|@*">
80
+ <xhtml:tr>
81
+ <xhtml:th>{name()}</xhtml:th>
82
+ <xhtml:td>{.}</xhtml:td>
83
+ </xhtml:tr>
84
+ </xsl:template>
85
+ </template>
86
+ </custom-element>
87
+ <dce-2>?</dce-2>
88
+ </template>
89
+ </html-demo-element>
90
+
91
+
92
+ <html-demo-element legend="2. window.location simplest"
93
+ description="location read only during initial and only render, does not track the changes."
94
+ id="dce1">
95
+ <p>Has to produce URL properties</p>
96
+ <template>
97
+ <custom-element tag="dce-1" hidden>
98
+ <template>
99
+
100
+ <location-element slice="window-url"></location-element>
101
+
102
+ <xhtml:table>
103
+ <xhtml:tbody>
104
+ <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
105
+ <for-each select="//slice/window-url/value/@*">
106
+ <xhtml:tr>
107
+ <xhtml:th>{name()}</xhtml:th>
108
+ <xhtml:td>{.}</xhtml:td>
109
+ </xhtml:tr>
110
+ </for-each>
111
+ </xhtml:tbody>
112
+ <xhtml:tbody>
113
+ <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
114
+ <for-each select="//slice/window-url/value/params/*">
115
+ <xhtml:tr>
116
+ <xhtml:th>{name()}</xhtml:th>
117
+ <xhtml:td>{.}</xhtml:td>
118
+ </xhtml:tr>
119
+ </for-each>
120
+ </xhtml:tbody>
121
+ </xhtml:table>
122
+ </template>
123
+ </custom-element>
124
+ <dce-1>?</dce-1>
125
+ </template>
126
+ </html-demo-element>
127
+
128
+
129
+ <html-demo-element legend="3. External URL as HREF attribute"
130
+ description="url parsed and populated into slice."
131
+ id="dce3">
132
+ <p>Has to produce URL properties</p>
133
+ <template>
134
+ <custom-element tag="dce-3" hidden>
135
+ <template>
136
+
137
+ <location-element slice="href-url" href="https://my.example?a=1&b=2#3" ></location-element>
138
+
139
+ <xhtml:table>
140
+ <xhtml:tbody>
141
+ <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
142
+ <for-each select="//slice/href-url/value/@*">
143
+ <xhtml:tr>
144
+ <xhtml:th>{name()}</xhtml:th>
145
+ <xhtml:td>{.}</xhtml:td>
146
+ </xhtml:tr>
147
+ </for-each>
148
+ </xhtml:tbody>
149
+ <xhtml:tbody>
150
+ <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
151
+ <for-each select="//slice/href-url/value/params/*">
152
+ <xhtml:tr>
153
+ <xhtml:th>{name()}</xhtml:th>
154
+ <xhtml:td>{.}</xhtml:td>
155
+ </xhtml:tr>
156
+ </for-each>
157
+ </xhtml:tbody>
158
+ </xhtml:table>
159
+ </template>
160
+ </custom-element>
161
+ <dce-3>?</dce-3>
162
+ </template>
163
+ </html-demo-element>
164
+
165
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
166
+
167
+ </body>
168
+ </html>
package/storybook-static/demo/logo.png ADDED
Binary file
package/storybook-static/demo/module-url.html ADDED
@@ -0,0 +1,215 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
3
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6
+ <title>importmap custom-element Declarative Custom Element implementation demo</title>
7
+ <link rel="icon" href="./wc-square.svg"/>
8
+ <script type="importmap">
9
+ {
10
+ "imports": {
11
+ "lib-root/": "./lib-dir/",
12
+ "embed-lib": "./lib-dir/embed-lib.html"
13
+ }
14
+ }
15
+ </script>
16
+ <script type="module" src="../location-element.js"></script>
17
+ <script type="module" src="../module-url.js"></script>
18
+ <script type="module" src="../custom-element.js"></script>
19
+
20
+ <style>
21
+ @import "./demo.css";
22
+
23
+ dce-root {
24
+ box-shadow: 0 0 0.5rem lime;
25
+ padding: 1rem;
26
+ display: inline-block;
27
+ }
28
+ main {
29
+ display: flex;
30
+ flex-wrap: wrap;
31
+ &>section{
32
+ flex:1 20rem;
33
+ }
34
+ }
35
+ </style>
36
+
37
+ </head>
38
+ <body>
39
+
40
+ <nav>
41
+ <h3><a href="../index.html"><code>custom-element</code> demo</a>, <code>importmap</code></h3>
42
+ </nav>
43
+ <main>
44
+ <section>
45
+ <h3>How to get the module URL for <code>custom-element</code>?</h3>
46
+ Answer: by defining following attributes in <code>module-url</code>:
47
+ <ol>
48
+ <li><code>src</code> with path to module resource, If omitted, it would match the
49
+ <code>window.location.href</code></li>
50
+ <li><code>slice</code> to read the URL</li>
51
+ </ol>
52
+ URL properties would be a part of slice data, the value would be a full URL.
53
+ </section><section>
54
+ <h3>Where to use <code>module-url</code>?</h3>
55
+ Answer: to inject the library resources URL into generated HTML.
56
+ <p><a
57
+ href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#importing_modules_using_import_maps"
58
+ >Import maps </a> are used for defining the dependencies location on the web page level.
59
+ This way dependencies could reside on different CDN path or even domains while in the code would be
60
+ referenced
61
+ by symbolic package name.
62
+ See the CDN example bellow.</p>
63
+ <br/>
64
+ <p>The resolving of import maps is done by
65
+ <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta/resolve">import.meta.resolve(path)</a>
66
+ </p>
67
+ </section><section>
68
+ <h3>Where NOT to use <code>module-url</code>?</h3>
69
+ Answer:
70
+ <ol>
71
+ <li> in <code>scr</code> attribute of &lt;custom-element &gt;<br/>
72
+ - It uses the same module resolving mechanism
73
+ </li>
74
+ <li> for getting/setting the page URL,<br/>
75
+ - see <a href="./set-url.html">How to set page URL in <code>custom-element</code>?</a>
76
+
77
+ </li>
78
+ </ol>
79
+
80
+ <h3>See also</h3>
81
+ <p><a href="./external-template.html">How to use external templates?</a></p>
82
+ </section>
83
+ <section>
84
+ <html-demo-element legend="this page import maps"
85
+ >
86
+ <template>
87
+ {
88
+ "imports": {
89
+ "lib-root": "./lib-dir/",
90
+ "embed-lib": "./lib-dir/embed-lib.html"
91
+ }
92
+ }
93
+ </template>
94
+ </html-demo-element>
95
+ </section>
96
+ </main>
97
+
98
+
99
+ <html-demo-element legend="1. relative to page path"
100
+ description="Should render Vulcan Salute 🖖 with link to embed-1.html, link should open the page"
101
+ >
102
+ <template>
103
+ <custom-element>
104
+ <a href="./embed-1.html">
105
+ <custom-element src="./embed-1.html"></custom-element>
106
+ </a>
107
+ </custom-element>
108
+ </template>
109
+ </html-demo-element>
110
+
111
+ <html-demo-element legend="2. module by symbolic name"
112
+ description="should render '👋 from embed-lib-component' as link to 'demo-lib/embed-lib.html', link should open the page "
113
+ >
114
+ <p><code>embed-lib</code> resolved to <code>./lib-dir/embed-lib.html</code> by page <i>importmap</i></p>
115
+ <template>
116
+ <custom-element>
117
+ <template>
118
+ <module-url slice="lib-url" src="embed-lib"></module-url>
119
+ <if test="//lib-url/@error">
120
+ <p>error: <b>{//lib-url/@error}</b></p>
121
+ </if>
122
+ check the link:
123
+ <a href="{//lib-url}">
124
+ <custom-element src="embed-lib#embed-lib-component">
125
+ failed to load
126
+ </custom-element>
127
+ </a>
128
+ </template>
129
+ </custom-element>
130
+
131
+ </template>
132
+ </html-demo-element>
133
+
134
+ <html-demo-element legend="3. module by symbolic name with missing importmap entry"
135
+ description="should render error message and `failed to load` broken link "
136
+ >
137
+ <p>As <code>fakedemo-lib</code> is not in importmaps, the symbolic name is not resolved and renders the error</p>
138
+
139
+ <template>
140
+ <custom-element>
141
+ <template>
142
+ <module-url slice="lib-url" src="fakedemo-lib/embed-lib.html"></module-url>
143
+ <if test="//lib-url/@error">
144
+ <p>error: <b>{//lib-url/@error}</b></p>
145
+ </if>
146
+ the link is broken:
147
+ <a href="{//lib-url}">
148
+ <custom-element src="fakedemo-lib/embed-lib.html#embed-lib-component">
149
+ failed to load
150
+ </custom-element>
151
+ </a>
152
+ </template>
153
+ </custom-element>
154
+ </template>
155
+ </html-demo-element>
156
+
157
+
158
+ <html-demo-element legend="4. module path by symbolic name"
159
+ description="should render two smiley images and links should open matching page"
160
+ >
161
+ <p><code>lib-root</code> resolved to <code>lib-dir</code> by page <i>importmap</i></p>
162
+ <template>
163
+ <custom-element>
164
+ <template>
165
+ <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-hash"></module-url>
166
+ <module-url slice="img-url" src="lib-root/Smiley.svg"></module-url>
167
+ <if test="//lib-url/@error">
168
+ <p>error: <b>{//lib-url/@error}</b></p>
169
+ </if>
170
+ check the link:
171
+ <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-hash <img src="{//img-url}" alt=""/></a>
172
+ <custom-element src="lib-root/embed-lib.html#embed-relative-hash">
173
+ failed to load
174
+ </custom-element>
175
+
176
+ </template>
177
+ </custom-element>
178
+
179
+ </template>
180
+ </html-demo-element>
181
+
182
+ <html-demo-element legend="5. module path by symbolic name to internal link within lib"
183
+ description="should render '👍 from embed-relative-file' and Vulcan Salute 🖖. Links should open matching page "
184
+ >
185
+ <template>
186
+ <custom-element>
187
+ <template>
188
+ <module-url slice="lib-url" src="lib-root/embed-lib.html#embed-relative-file"></module-url>
189
+ <if test="//lib-url/@error">
190
+ <p>error: <b>{//lib-url/@error}</b></p>
191
+ </if>
192
+ check the link:
193
+ <a href="{//lib-url}"> lib-root/embed-lib.html#embed-relative-file </a>
194
+ <custom-element src="lib-root/embed-lib.html#embed-relative-file">
195
+ failed to load
196
+ </custom-element>
197
+
198
+ </template>
199
+ </custom-element>
200
+
201
+ </template>
202
+ </html-demo-element>
203
+
204
+
205
+ <html-demo-element src="./lib-dir/embed-lib.html"
206
+ legend="./lib-dir/embed-lib.html"
207
+ description="resides within ./lib-dir and serves a sample of module with multiple templates"
208
+ >
209
+
210
+ </html-demo-element>
211
+
212
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
213
+
214
+ </body>
215
+ </html>