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

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 (317) hide show
  1. package/.storybook/main.ts +19 -21
  2. package/.storybook/preview-head.html +8 -0
  3. package/.storybook/preview.ts +13 -5
  4. package/README.md +4 -4
  5. package/bin/postinstall.sh +3 -2
  6. package/bin/vitest/vitest-browser-importmaps.mjs +20 -0
  7. package/coverage/coverage-final.json +13 -8
  8. package/coverage/index.html +51 -36
  9. package/coverage/src/custom-element/coverage.svg +1 -1
  10. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  11. package/coverage/src/custom-element/custom-element.js.html +493 -406
  12. package/coverage/src/custom-element/demo/coverage.svg +10 -0
  13. package/coverage/src/custom-element/demo/index.html +116 -0
  14. package/coverage/src/custom-element/demo/z.js/coverage.svg +10 -0
  15. package/coverage/src/custom-element/demo/z.js.html +112 -0
  16. package/coverage/src/custom-element/http-request.js.html +12 -12
  17. package/coverage/src/custom-element/index.html +37 -22
  18. package/coverage/src/custom-element/local-storage.js.html +1 -1
  19. package/coverage/src/custom-element/location-element.js/coverage.svg +1 -1
  20. package/coverage/src/custom-element/location-element.js.html +116 -47
  21. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  22. package/coverage/src/custom-element/module-url.js.html +181 -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 +6 -9
  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 +1 -1
  32. package/coverage/src/stories/external-template.test.stories.ts.html +22 -10
  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 +58 -13
  36. package/coverage/src/stories/local-storage.test.stories.ts.html +1 -1
  37. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  38. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  39. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  40. package/coverage/src/stories/set-url.test.stories.ts/coverage.svg +10 -0
  41. package/coverage/src/stories/set-url.test.stories.ts.html +427 -0
  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/coverage.svg +10 -0
  46. package/coverage/src/stories/version-select.test.stories.ts.html +391 -0
  47. package/coverage/src/sum.ts.html +1 -1
  48. package/dist/confused.svg +1 -0
  49. package/dist/custom-element-CckoVsvO.cjs +53 -0
  50. package/dist/custom-element-b7c_7Kz4.js +485 -0
  51. package/dist/custom-element-bundle.cjs +1 -1
  52. package/dist/custom-element-bundle.js +3 -3
  53. package/dist/demo/a.html +60 -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 +26 -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 +105 -0
  77. package/dist/demo/npm-versions.html +65 -0
  78. package/dist/demo/parameters.html +70 -0
  79. package/dist/demo/s.xml +28 -0
  80. package/dist/demo/s.xslt +97 -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 +62 -0
  93. package/dist/demo/z.js +9 -0
  94. package/dist/demo/z.xml +60 -0
  95. package/dist/embed-1.html +1 -2
  96. package/dist/location-element-DRB7hCwA.cjs +1 -0
  97. package/dist/location-element-FJlONi2n.js +65 -0
  98. package/dist/mockServiceWorker.js +1 -1
  99. package/package.json +93 -93
  100. package/public/confused.svg +1 -0
  101. package/public/demo/a.html +60 -0
  102. package/public/demo/b.html +13 -0
  103. package/public/demo/confused.svg +38 -0
  104. package/public/demo/data-slices.html +216 -0
  105. package/public/demo/dce-social-preview.png +0 -0
  106. package/public/demo/demo.css +26 -0
  107. package/public/demo/dom-merge.html +123 -0
  108. package/public/demo/embed-1.html +2 -0
  109. package/public/demo/external-template.html +239 -0
  110. package/public/demo/form.html +239 -0
  111. package/public/demo/hex-grid-dce.html +183 -0
  112. package/public/demo/hex-grid-transform.png +0 -0
  113. package/public/demo/hex-grid.html +66 -0
  114. package/public/demo/html-template.html +126 -0
  115. package/public/demo/html-template.xhtml +45 -0
  116. package/public/demo/html-template.xml +45 -0
  117. package/public/demo/http-request.html +143 -0
  118. package/public/demo/lib-dir/Smiley.svg +24 -0
  119. package/public/demo/lib-dir/embed-lib.html +34 -0
  120. package/public/demo/local-storage.html +218 -0
  121. package/public/demo/location-element.html +168 -0
  122. package/public/demo/logo.png +0 -0
  123. package/public/demo/module-url.html +215 -0
  124. package/public/demo/npm-versions-demo.html +105 -0
  125. package/public/demo/npm-versions.html +65 -0
  126. package/public/demo/parameters.html +70 -0
  127. package/public/demo/s.xml +28 -0
  128. package/public/demo/s.xslt +97 -0
  129. package/public/demo/s1.xslt +60 -0
  130. package/public/demo/scoped-css.html +169 -0
  131. package/public/demo/set-url.html +141 -0
  132. package/public/demo/ss.html +57 -0
  133. package/public/demo/table.xml +25 -0
  134. package/public/demo/table.xsl +293 -0
  135. package/public/demo/template.xsl +46 -0
  136. package/public/demo/tree.xml +25 -0
  137. package/public/demo/tree.xsl +33 -0
  138. package/public/demo/wc-square.svg +1 -0
  139. package/public/demo/xhtml-template.xhtml +45 -0
  140. package/public/demo/z.html +62 -0
  141. package/public/demo/z.js +9 -0
  142. package/public/demo/z.xml +60 -0
  143. package/public/embed-1.html +1 -2
  144. package/public/mockServiceWorker.js +1 -1
  145. package/src/custom-element/custom-element.js +52 -23
  146. package/src/custom-element/demo/confused.svg +1 -0
  147. package/src/custom-element/demo/demo.css +5 -1
  148. package/src/custom-element/demo/embed-1.html +1 -2
  149. package/src/custom-element/demo/external-template.html +122 -62
  150. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  151. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  152. package/src/custom-element/demo/location-element.html +17 -4
  153. package/src/custom-element/demo/module-url.html +215 -0
  154. package/src/custom-element/demo/npm-versions-demo.html +105 -0
  155. package/src/custom-element/demo/npm-versions.html +65 -0
  156. package/src/custom-element/demo/s.xml +27 -10
  157. package/src/custom-element/demo/s.xslt +96 -59
  158. package/src/custom-element/demo/set-url.html +141 -0
  159. package/src/custom-element/demo/z.js +9 -0
  160. package/src/custom-element/ide/customData-dce.json +215 -125
  161. package/src/custom-element/ide/web-types-dce.json +184 -116
  162. package/src/custom-element/ide/web-types-xsl.json +1 -1
  163. package/src/custom-element/index.html +3 -1
  164. package/src/custom-element/location-element.js +25 -2
  165. package/src/custom-element/module-url.js +33 -0
  166. package/src/custom-element.test.ts +26 -26
  167. package/src/mocks/handlers.ts +10 -1
  168. package/src/mocks/versions.mock.ts +786 -0
  169. package/src/stories/attributes.test.stories.ts +0 -1
  170. package/src/stories/external-template.test.stories.ts +11 -7
  171. package/src/stories/module-url.test.stories.ts +183 -0
  172. package/src/stories/set-url.test.stories.ts +114 -0
  173. package/src/stories/version-select.test.stories.ts +102 -0
  174. package/storybook-static/assets/Color-KGDBMAHA-CH-YyWYq.js +1 -0
  175. package/storybook-static/assets/{Configure-CyLVkwlf.js → Configure-DFL_bm2M.js} +2 -2
  176. package/storybook-static/assets/DocsRenderer-PKQXORMH-Bz-_1hmS.js +2 -0
  177. package/storybook-static/assets/{attributes.test.stories-BckCcyrF.js → attributes.test.stories-DIQXccHc.js} +2 -3
  178. package/storybook-static/assets/{css.test.stories-B-QcObCF.js → css.test.stories-BV2hi4CY.js} +1 -1
  179. package/storybook-static/assets/custom-element-wn23PUwN.js +231 -0
  180. package/storybook-static/assets/{dom-merge.test.stories-CjXhjTQY.js → dom-merge.test.stories-Dws0C2-g.js} +1 -1
  181. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  182. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  183. package/storybook-static/assets/{external-template.test.stories-BBqyi0az.js → external-template.test.stories-BHO48b0j.js} +19 -16
  184. package/storybook-static/assets/{form.test.stories-DsIo1B4n.js → form.test.stories-dv9mwp24.js} +1 -1
  185. package/storybook-static/assets/handlers-CaCq2ZPF.js +467 -0
  186. package/storybook-static/assets/http-request-DNq59pnj.js +1 -0
  187. package/storybook-static/assets/http-request.stories-B2ke7LtS.js +281 -0
  188. package/storybook-static/assets/iframe-D4Sos1HO.js +2 -0
  189. package/storybook-static/assets/index-BnXBQqj9.js +605 -0
  190. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  191. package/storybook-static/assets/index-Cpxqn5iQ.js +1 -0
  192. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  193. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  194. package/storybook-static/assets/index-Dz4OaB2k.js +1 -0
  195. package/storybook-static/assets/index-sm7QlJZE.js +1 -0
  196. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  197. package/storybook-static/assets/{local-storage.test.stories-Cs2v3QTS.js → local-storage.test.stories-BpogLNq-.js} +1 -1
  198. package/storybook-static/assets/location-element-hKpcXCdn.js +1 -0
  199. package/storybook-static/assets/{location-element.test.stories-WkrQDzJJ.js → location-element.test.stories-BiFvBop7.js} +9 -9
  200. package/storybook-static/assets/module-url.test.stories-BXoM34tX.js +208 -0
  201. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  202. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  203. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  204. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  205. package/storybook-static/assets/preview-Cg7hXPRq.js +2 -0
  206. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  207. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  208. package/storybook-static/assets/{preview-DRnyIGXK.js → preview-oHxXRSIu.js} +15 -15
  209. package/storybook-static/assets/set-url.test.stories-Cg5Z0r7x.js +81 -0
  210. package/storybook-static/assets/{slice-events.test.stories-BRBBc0JT.js → slice-events.test.stories-D_ttGp3g.js} +1 -1
  211. package/storybook-static/assets/{slots.test.stories-r-i91k3y.js → slots.test.stories-DBNXOm0T.js} +1 -1
  212. package/storybook-static/assets/version-select.test.stories-CgV3UCim.js +109 -0
  213. package/storybook-static/confused.svg +1 -0
  214. package/storybook-static/demo/a.html +60 -0
  215. package/storybook-static/demo/b.html +13 -0
  216. package/storybook-static/demo/confused.svg +38 -0
  217. package/storybook-static/demo/data-slices.html +216 -0
  218. package/storybook-static/demo/dce-social-preview.png +0 -0
  219. package/storybook-static/demo/demo.css +26 -0
  220. package/storybook-static/demo/dom-merge.html +123 -0
  221. package/storybook-static/demo/embed-1.html +2 -0
  222. package/storybook-static/demo/external-template.html +239 -0
  223. package/storybook-static/demo/form.html +239 -0
  224. package/storybook-static/demo/hex-grid-dce.html +183 -0
  225. package/storybook-static/demo/hex-grid-transform.png +0 -0
  226. package/storybook-static/demo/hex-grid.html +66 -0
  227. package/storybook-static/demo/html-template.html +126 -0
  228. package/storybook-static/demo/html-template.xhtml +45 -0
  229. package/storybook-static/demo/html-template.xml +45 -0
  230. package/storybook-static/demo/http-request.html +143 -0
  231. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  232. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  233. package/storybook-static/demo/local-storage.html +218 -0
  234. package/storybook-static/demo/location-element.html +168 -0
  235. package/storybook-static/demo/logo.png +0 -0
  236. package/storybook-static/demo/module-url.html +215 -0
  237. package/storybook-static/demo/npm-versions-demo.html +105 -0
  238. package/storybook-static/demo/npm-versions.html +65 -0
  239. package/storybook-static/demo/parameters.html +70 -0
  240. package/storybook-static/demo/s.xml +28 -0
  241. package/storybook-static/demo/s.xslt +97 -0
  242. package/storybook-static/demo/s1.xslt +60 -0
  243. package/storybook-static/demo/scoped-css.html +169 -0
  244. package/storybook-static/demo/set-url.html +141 -0
  245. package/storybook-static/demo/ss.html +57 -0
  246. package/storybook-static/demo/table.xml +25 -0
  247. package/storybook-static/demo/table.xsl +293 -0
  248. package/storybook-static/demo/template.xsl +46 -0
  249. package/storybook-static/demo/tree.xml +25 -0
  250. package/storybook-static/demo/tree.xsl +33 -0
  251. package/storybook-static/demo/wc-square.svg +1 -0
  252. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  253. package/storybook-static/demo/z.html +62 -0
  254. package/storybook-static/demo/z.js +9 -0
  255. package/storybook-static/demo/z.xml +60 -0
  256. package/storybook-static/embed-1.html +1 -2
  257. package/storybook-static/favicon.svg +1 -7
  258. package/storybook-static/iframe.html +42 -30
  259. package/storybook-static/index.html +36 -18
  260. package/storybook-static/index.json +1 -1
  261. package/storybook-static/mockServiceWorker.js +1 -1
  262. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  263. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  264. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  265. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  266. package/storybook-static/project.json +1 -1
  267. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +32 -32
  268. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +1 -1
  269. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  270. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  271. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  272. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  273. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  274. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  275. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  276. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  277. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  278. package/storybook-static/sb-manager/globals.js +48 -1
  279. package/storybook-static/sb-manager/runtime.js +11884 -1
  280. package/storybook-static/sb-preview/globals.js +33 -1
  281. package/storybook-static/sb-preview/runtime.js +9437 -108
  282. package/vite.config.js +2 -1
  283. package/dist/custom-element-BDK7dcJN.cjs +0 -53
  284. package/dist/custom-element-DqtzLkTG.js +0 -471
  285. package/dist/location-element-2m0gWq_d.cjs +0 -1
  286. package/dist/location-element-nA_wsqBt.js +0 -49
  287. package/storybook-static/assets/Color-PRSJMWNM-y4ZsI1hY.js +0 -1
  288. package/storybook-static/assets/DocsRenderer-K4EAMTCU-VRGUwRrq.js +0 -2
  289. package/storybook-static/assets/WithTooltip-KJL26V4Q-xdXH9Ztt.js +0 -1
  290. package/storybook-static/assets/custom-element-BIxkVg7K.js +0 -219
  291. package/storybook-static/assets/formatter-2WMMO6ZP-CThVcQxM.js +0 -58
  292. package/storybook-static/assets/http-request.stories-sXA_Y-VM.js +0 -300
  293. package/storybook-static/assets/iframe-DcDTQOmA.js +0 -2
  294. package/storybook-static/assets/index-CUFHd5VD.js +0 -1
  295. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  296. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  297. package/storybook-static/assets/index-DPPi9iZu.js +0 -548
  298. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  299. package/storybook-static/assets/index-VWixWKZ7.js +0 -1
  300. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  301. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  302. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  303. package/storybook-static/assets/preview-p-Bwze-K.js +0 -2
  304. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-OnioRcs9.js +0 -1
  305. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  306. package/storybook-static/sb-common-assets/fonts.css +0 -31
  307. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  308. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  309. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  310. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  311. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  312. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  313. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  314. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  315. package/storybook-static/sb-manager/index.js +0 -1
  316. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  317. /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/public/demo/hex-grid-dce.html ADDED
@@ -0,0 +1,183 @@
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
+ <script type="module" src="../custom-element.js"></script>
6
+
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
9
+ button{ font-family: 'Roboto', sans-serif; color: darkcyan;}
10
+ body{ background-color: #DDE2F1;}
11
+ </style>
12
+ </head>
13
+ <body>
14
+
15
+ <custom-element tag="hex-grid">
16
+ <template id="hex-grid-template">
17
+ <style>
18
+ section{ filter: drop-shadow(0px 2px 3px rgba(50, 50, 0, 0.5)) }
19
+ :root {
20
+ --hex-grid-size: 8rem;
21
+ }
22
+
23
+ nav {
24
+ --hex-grid-size: 8rem;
25
+ display: flex;
26
+ flex-wrap: wrap;
27
+ flex-direction: row;
28
+ justify-content: left;
29
+ margin-right: calc(var(--hex-grid-size)/2);
30
+ padding-bottom: calc(var(--hex-grid-size,8rem));
31
+ gap: 0.1rem;
32
+ section{
33
+ width: var(--hex-grid-size);
34
+ height: calc(1.53 *var(--hex-grid-size))
35
+ }
36
+ button {
37
+ display: flex;
38
+ flex-direction: column; align-items: center;
39
+ justify-content: center;
40
+ border: none;
41
+ width: var(--hex-grid-size,8rem);
42
+ min-width: var(--hex-grid-size,8rem);
43
+ height: var(--hex-grid-size,8rem);
44
+ padding: calc( var(--hex-grid-size,8rem)/8);
45
+ clip-path: polygon(50% 0, 100% 25%,100% 75%, 50% 100%, 0 75%, 0 25%);
46
+ &:hover,&:focus,&.focus{
47
+ transform: scale3d(0.9,0.9,0.9) ;
48
+ background-color: mediumaquamarine;
49
+ color: white;
50
+ }
51
+
52
+ img{ height: calc( var(--hex-grid-size,8rem)/2);}
53
+ }
54
+
55
+
56
+ section:nth-child(even){
57
+ width:0;
58
+ }
59
+ section:nth-child(even){
60
+ position: relative;
61
+ top: 50%;
62
+ button{
63
+ position: absolute;
64
+
65
+ top: calc(0.77*var(--hex-grid-size));
66
+ right: calc( -1* var(--hex-grid-size,8rem)/2);
67
+ }
68
+ }
69
+ }
70
+ </style>
71
+ <nav>
72
+ <for-each select="/datadom/payload/xhtml:*">
73
+ <if test="local-name(.) = 'style'">
74
+ <copy-of select="." />
75
+ </if>
76
+ <!-- sanitize blank spans -->
77
+ <if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
78
+ <section>
79
+ <button class="action">
80
+ {@alt}
81
+ <copy-of select="."/>
82
+ </button>
83
+ </section>
84
+ </if>
85
+ </for-each>
86
+ </nav>
87
+ </template>
88
+ </custom-element>
89
+
90
+ <!--<hex-grid>-->
91
+ <!-- <img src="wc-square.svg" alt="web component"/>-->
92
+ <!-- <img src="wc-square.svg" alt="123"/>-->
93
+ <!-- <span>Hey!</span>-->
94
+ <!--</hex-grid>-->
95
+ <hex-grid class="grid2x">
96
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
97
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
98
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
99
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
100
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
101
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
102
+ <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
103
+ <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
104
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
105
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
106
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
107
+ <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
108
+ <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
109
+ <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
110
+ <img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
111
+ <img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
112
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
113
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>
114
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
115
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
116
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor" href="https://www.meteor.com/"/>
117
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
118
+ <img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
119
+ <img src="https://mithril.js.org/logo.svg" alt="Mithril.js" href="https://mithril.js.org/"/>
120
+ <img src="https://seeklogo.com/images/M/materialize-logo-0FCAD8A6F8-seeklogo.com.png" alt="Materialize"/>
121
+ <img src="https://seeklogo.com/images/P/preact-logo-64E4BF9ABC-seeklogo.com.png" alt="Preact"/>
122
+ <img src="https://seeklogo.com/images/D/dojo-logo-E24E2CA700-seeklogo.com.png" alt="Dojo"/>
123
+ <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js"/>
124
+ <img src="https://d3js.org/logo.svg" alt="D3.js"/>
125
+ <img src="https://lodash.com/assets/img/lodash.svg" alt="Lodash"/>
126
+ <img src="https://www.chartjs.org/img/chartjs-logo.svg" alt="Chart.JS" href="https://www.chartjs.org/"/>
127
+ <img src="https://glimmerjs.com/images/favicon.png" alt="Glimmer" href="https://glimmerjs.com/"/>
128
+ <img src="https://sarcadass.github.io/granim.js/favicon.ico" alt="Granim.js" href="https://sarcadass.github.io/granim.js/"/>
129
+ <img src="https://leafletjs.com/docs/images/favicon.ico" alt="leaflet.js" href="https://leafletjs.com/"/>
130
+ <img src="https://animejs.com/documentation/assets/img/favicon.png" alt="Anime.JS"/>
131
+ <img src="https://www.algolia.com/algoliaweb-static-favicons/light-mode/apple-touch-icon.png" alt="Algolia"/>
132
+ <img src="https://momentjs.com/static/img/moment-favicon.png" alt="Moment" href="https://momentjs.com"/>
133
+ <img src="https://omniscientjs.github.io/assets/favicon.ico" alt="Omniscient" href="https://omniscientjs.github.io"/>
134
+ <img src="https://aurelia.io/styles/images/aurelia-icon.svg" alt="Aurelia" href="https://aurelia.io"/>
135
+ <img src="https://emberjs.com/favicons/icon.svg" alt="EmberJS" href="https://emberjs.com"/>
136
+ <img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
137
+ <img src="https://webix.com/assets/favicons/favicon-96x96.png" alt="Webix" href="https://webix.com/"/>
138
+ <img src="https://images.ctfassets.net/vkdbses00qqt/3Id5VwofmvaFbjuSumaOmM/592c2d2e523187bd054a16b358d5a7ec/framework.svg" alt="Gatsby" href="https://www.gatsbyjs.com/"/>
139
+ </hex-grid>
140
+
141
+ <custom-element tag="hex-row">
142
+ <template>
143
+ <style>
144
+ hex-grid {
145
+ nav {
146
+ --hex-grid-size:6rem;
147
+ display: inline-flex;
148
+ padding-bottom: 0;
149
+ margin-right: 0;
150
+ section{ margin-right: 0.2rem; height: var(--hex-grid-size);}
151
+ button:has([selected]){ background-color: #2d4554; color: burlywood; }
152
+ }
153
+ }
154
+ </style>
155
+ <for-each select="/datadom/payload/xhtml:*">
156
+ <!-- sanitize blank spans -->
157
+ <if test="local-name(.) != 'span' or normalize-space(.) != ''">
158
+ <hex-grid>
159
+ <copy-of select="."/>
160
+ </hex-grid>
161
+ </if>
162
+ </for-each>
163
+ </template>
164
+ </custom-element>
165
+ <hex-row class="grid2x">
166
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
167
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
168
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor"/>
169
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery" selected/>
170
+ <img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
171
+ <img src="https://mithril.js.org/logo.svg" alt="Mithril.js"/>
172
+ <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js" href="https://backbonejs.org/"/>
173
+ <img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
174
+ </hex-row>
175
+
176
+
177
+
178
+ <style>
179
+ .grid2x{--hex-grid-size:16rem; margin-top: 8rem; }
180
+ </style>
181
+
182
+ </body>
183
+ </html>
package/public/demo/hex-grid.html ADDED
@@ -0,0 +1,66 @@
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
+ <link rel="icon" href="./wc-square.svg"/>
6
+ <script type="module" src="../custom-element.js"></script>
7
+ <style>
8
+ html
9
+ { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
10
+ font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
11
+ }
12
+ #grid1 nav {
13
+ transform: perspective(15cm) rotateX(5deg) rotateY(40deg) translateX(20rem) translateY(6rem);
14
+ }
15
+ #grid2 nav {
16
+ transform: perspective(15cm) rotateX(5deg) rotateY(50deg) translateX(20rem) translateY(10rem);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+
22
+ <nav>
23
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
24
+ <h3>Example of DCE HTML as a library.</h3>
25
+ </nav>
26
+ <p>The template and its own responsive layout behavior demo resides in
27
+ <a href="hex-grid-dce.html">hex-grid-dce.html</a> file.</p>
28
+ <custom-element src="hex-grid-dce.html#hex-grid-template" tag="hex-grid" >
29
+ <template><i>loading hex-grid template from HTML lib file ...</i></template>
30
+ </custom-element>
31
+
32
+ <hex-grid id="grid1">
33
+ <template>
34
+ <style>
35
+ nav{
36
+ --hex-grid-size:5rem;
37
+ button dce-text{ position: absolute; top: 3rem; text-shadow: 0 0 3px white, 0 0 6px blue; }
38
+ }
39
+ </style>
40
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
41
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
42
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
43
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
44
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
45
+ </template>
46
+ </hex-grid>
47
+ <hex-grid id="grid2">
48
+ <template>
49
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
50
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
51
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
52
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
53
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
54
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
55
+ <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
56
+ <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
57
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
58
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
59
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
60
+ <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
61
+ <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
62
+ <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
63
+ </template>
64
+ </hex-grid>
65
+ </body>
66
+ </html>
package/public/demo/html-template.html ADDED
@@ -0,0 +1,126 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <title>template based on HTML file</title>
5
+ <style>svg {
6
+ width: 4rem;
7
+ }</style>
8
+ </head>
9
+ <body>
10
+ <script>console.error('Stranger danger!')</script>
11
+ <b id="wave">👋</b>
12
+ <b id="ok">👌</b>
13
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
14
+ <defs>
15
+ <style>.cls-1 {
16
+ fill: #c2e6f1;
17
+ }
18
+
19
+ .cls-2 {
20
+ fill: #dcf1f7;
21
+ }
22
+
23
+ .cls-3 {
24
+ fill: #2d4554;
25
+ }
26
+
27
+ .cls-4 {
28
+ fill: #60cae5;
29
+ }</style>
30
+ </defs>
31
+ <polygon class="cls-3"
32
+ 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"/>
33
+ <path class="cls-2"
34
+ 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"/>
35
+ <path class="cls-2"
36
+ 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"/>
37
+ <path class="cls-1"
38
+ 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"/>
39
+ <path class="cls-2"
40
+ 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"/>
41
+ <path class="cls-2"
42
+ 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"/>
43
+ <path class="cls-2"
44
+ 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"/>
45
+ <path class="cls-2"
46
+ 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"/>
47
+ <path class="cls-4"
48
+ 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"/>
49
+ <path class="cls-4"
50
+ 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"/>
51
+ <path class="cls-4"
52
+ 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"/>
53
+ <path class="cls-4"
54
+ 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"/>
55
+ <path class="cls-4"
56
+ 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"/>
57
+ <path class="cls-4"
58
+ 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"/>
59
+ <path class="cls-4"
60
+ 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"/>
61
+ <path class="cls-4"
62
+ 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"/>
63
+ <path class="cls-2"
64
+ 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"/>
65
+ <path class="cls-1"
66
+ 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"/>
67
+ <path class="cls-1"
68
+ 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"/>
69
+ <path class="cls-2"
70
+ 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"/>
71
+ <path class="cls-1"
72
+ 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"/>
73
+ <path class="cls-1"
74
+ 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"/>
75
+ </svg>
76
+ <math id="sophomores-dream" display="block">
77
+ <mrow>
78
+ <msubsup>
79
+ <mo>∫</mo>
80
+ <mn>0</mn>
81
+ <mn>1</mn>
82
+ </msubsup>
83
+ <msup>
84
+ <mi>x</mi>
85
+ <mi>x</mi>
86
+ </msup>
87
+ <mo rspace="0.22em">⁢</mo>
88
+ <mo rspace="0">ⅆ</mo>
89
+ <mi>x</mi>
90
+ <mo>=</mo>
91
+ <munderover>
92
+ <mo>∑</mo>
93
+ <mrow>
94
+ <mi>n</mi>
95
+ <mo>=</mo>
96
+ <mn>1</mn>
97
+ </mrow>
98
+ <mn>∞</mn>
99
+ </munderover>
100
+ <msup>
101
+ <mrow>
102
+ <mo>(</mo>
103
+ <mrow>
104
+ <mo form="prefix">−</mo>
105
+ <mn>1</mn>
106
+ </mrow>
107
+ <mo>)</mo>
108
+ </mrow>
109
+ <mrow>
110
+ <mi>n</mi>
111
+ <mo>+</mo>
112
+ <mn>1</mn>
113
+ </mrow>
114
+ </msup>
115
+ <mo>⁢</mo>
116
+ <msup>
117
+ <mi>n</mi>
118
+ <mrow>
119
+ <mo form="prefix">−</mo>
120
+ <mi>n</mi>
121
+ </mrow>
122
+ </msup>
123
+ </mrow>
124
+ </math>
125
+ </body>
126
+ </html>
package/public/demo/html-template.xhtml ADDED
@@ -0,0 +1,45 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <title>template based on HTML file</title>
6
+ </head>
7
+ <body>
8
+ <b id="wave">👋</b>
9
+ <b id="ok">👌</b>
10
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/></svg>
11
+ <xsl:stylesheet
12
+ id="embedded-xsl"
13
+ version="1.0"
14
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
15
+ <xsl:output
16
+ method="html"
17
+ omit-xml-declaration="yes"
18
+ standalone="yes"
19
+ indent="yes"
20
+ />
21
+
22
+ <xsl:template match="/">
23
+ <xsl:apply-templates select="*"/>
24
+ </xsl:template>
25
+ <xsl:template match="*">
26
+ <details style="padding:0 1rem" open="open">
27
+ <summary>
28
+ <b style="color:green"><xsl:value-of select="name()"/></b>
29
+ <xsl:apply-templates select="@*"/>
30
+ </summary>
31
+ <xsl:value-of select="./text()"/>
32
+ <xsl:apply-templates select="*"/>
33
+ </details>
34
+ </xsl:template>
35
+ <xsl:template match="@*">
36
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
37
+ </xsl:template>
38
+ <xsl:template match="text()">
39
+ <p>
40
+ <xsl:value-of select="."/>
41
+ </p>
42
+ </xsl:template>
43
+ </xsl:stylesheet>
44
+ </body>
45
+ </html>
package/public/demo/html-template.xml ADDED
@@ -0,0 +1,45 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <meta charset="UTF-8"/>
5
+ <title>template based on HTML file</title>
6
+ </head>
7
+ <body>
8
+ <b id="wave">👋</b>
9
+ <b id="ok">👌</b>
10
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/><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"/></svg>
11
+ <xsl:stylesheet
12
+ id="embedded-xsl"
13
+ version="1.0"
14
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
15
+ <xsl:output
16
+ method="html"
17
+ omit-xml-declaration="yes"
18
+ standalone="yes"
19
+ indent="yes"
20
+ />
21
+
22
+ <xsl:template match="/">
23
+ <xsl:apply-templates select="*"/>
24
+ </xsl:template>
25
+ <xsl:template match="*">
26
+ <details style="padding:0 1rem" open="open">
27
+ <summary>
28
+ <b style="color:green"><xsl:value-of select="name()"/></b>
29
+ <xsl:apply-templates select="@*"/>
30
+ </summary>
31
+ <xsl:value-of select="./text()"/>
32
+ <xsl:apply-templates select="*"/>
33
+ </details>
34
+ </xsl:template>
35
+ <xsl:template match="@*">
36
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
37
+ </xsl:template>
38
+ <xsl:template match="text()">
39
+ <p>
40
+ <xsl:value-of select="."/>
41
+ </p>
42
+ </xsl:template>
43
+ </xsl:stylesheet>
44
+ </body>
45
+ </html>
package/public/demo/http-request.html ADDED
@@ -0,0 +1,143 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>http-request Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg" />
7
+
8
+ <script type="module" src="../http-request.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+
13
+ button
14
+ { display: inline-flex; flex-direction: column; align-items: center; flex: auto;
15
+ box-shadow: inset silver 0px 0px 1rem; min-width: 12rem; padding: 1rem;
16
+ color: coral; text-shadow: 1px 1px silver; font-weight: bolder;
17
+ }
18
+ button img{ max-height: 10vw; min-height: 4rem;}
19
+ table{ min-width: 16rem; }
20
+ td{ border-bottom: 1px solid silver; }
21
+ tfoot td{ border-bottom: none; }
22
+ td,th{text-align: right; }
23
+ caption{ padding: 1rem; font-weight: bolder; font-family: sans-serif; }
24
+ dce-1{ padding: 0; display: flex; flex-wrap: wrap;}
25
+ code{ text-align: right; min-width: 3rem;}
26
+ </style>
27
+ </head>
28
+ <body>
29
+
30
+ <nav>
31
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
32
+ </nav>
33
+
34
+
35
+ <html-demo-element legend="0. url from text to http-request "
36
+ description="read data from arbitrary URL">
37
+ <template>
38
+ <custom-element>
39
+ <template>
40
+
41
+ <button slice="url-string" slice-value="''" slice-event="click">⬇️set blank</button>
42
+ <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=6'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=6</button>
43
+ <button slice="url-string" slice-value="'https://pokeapi.co/api/v2/pokemon?limit=3'" slice-event="click">⬇️https://pokeapi.co/api/v2/pokemon?limit=3</button>
44
+ <input slice="url-string" value="{ //url-string ?? '' }" style="width:100%"/>
45
+ <button slice="fetch-url" slice-event="click" slice-value="//url-string"> GET </button>
46
+ <http-request
47
+ url="{//fetch-url}"
48
+ slice="request_slice"
49
+ type="text"
50
+ mode="cors"
51
+ ></http-request>
52
+ <code>//fetch-url</code> from <code>{//fetch-url}</code><br/>
53
+ <ul><for-each select="//results">
54
+ <li>{@name}</li>
55
+ </for-each></ul>
56
+ </template>
57
+ </custom-element>
58
+ </template>
59
+ </html-demo-element>
60
+
61
+ <html-demo-element legend="1. http-request simplest"
62
+ description="load the list of pokemons">
63
+ <p>Should display 6 image buttons with pokemon name </p>
64
+ <template>
65
+ <custom-element>
66
+ <template><!-- wrapping into template to prevent images loading within DCE declaration -->
67
+ <p>Pokemon buttons from API</p>
68
+ <http-request
69
+ url="https://pokeapi.co/api/v2/pokemon?limit=6&offset=0"
70
+ slice="page"
71
+ method="GET"
72
+ header-accept="application/json"
73
+ ></http-request>
74
+ <variable name="slides-url"
75
+ >https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world</variable>
76
+ <for-each select="//results">
77
+ <variable name="pokeid"
78
+ select="substring-before( substring-after( @url, 'https://pokeapi.co/api/v2/pokemon/'),'/')"
79
+ ></variable>
80
+ <button>
81
+ <img src="{$slides-url}/{$pokeid}.svg"
82
+ alt="{@name}"/>
83
+ {@name}
84
+ </button>
85
+ </for-each>
86
+ </template>
87
+ </custom-element>
88
+ </template>
89
+ </html-demo-element>
90
+
91
+ <html-demo-element legend="2. http-request response and headers"
92
+ description="request and response headers access demo">
93
+
94
+ <template>
95
+ <custom-element url="https://pokeapi.co/api/v2/pokemon?offset=6&limit=6">
96
+ <template> <!-- IMPORTANT! to wrap DCE payload into template to avoid
97
+ http-request initializing out of instance -->
98
+ <attribute name="url"></attribute>
99
+ <http-request
100
+ url="{url}"
101
+ slice="request_slice"
102
+ type="text"
103
+ mode="cors"
104
+ header-x-test="testing"
105
+ ></http-request>
106
+ Content of <code>//slice/request_slice</code> is filled by <b>request</b> and <b>response</b>
107
+ from <code>${url}</code>
108
+
109
+ <h3>Samples</h3>
110
+ <table>
111
+ <tr><th> //slice/request_slice/value/request/@mode </th>
112
+ <td>{ //slice/request_slice/value/request/@mode }</td></tr>
113
+ <tr><th> //slice/request_slice/value/response/headers/@content-type </th>
114
+ <td>{ //slice/request_slice/value/response/headers/@content-type }</td></tr>
115
+ <tr><th> //slice/request_slice/value/response/@status </th>
116
+ <td>{ //slice/request_slice/value/response/@status }</td></tr>
117
+ </table>
118
+ <apply-templates mode="display" select="//slice/request_slice/value/*"></apply-templates>
119
+ <xsl:template mode="display" match="*">
120
+ <fieldset>
121
+ <legend> {local-name(.)} </legend>
122
+ <ul>
123
+ <for-each select="@*">
124
+ <li>
125
+ <var data-testid="section-attribute">@{local-name(.)}</var>
126
+ =
127
+ <code><value-of select='.'/></code>
128
+ </li>
129
+ </for-each>
130
+ </ul>
131
+ <apply-templates mode="display" select="*"></apply-templates>
132
+ </fieldset>
133
+ </xsl:template>
134
+ </template>
135
+ </custom-element>
136
+ </template>
137
+ </html-demo-element>
138
+
139
+
140
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
141
+
142
+ </body>
143
+ </html>