@epa-wg/custom-element-dist 0.0.1

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 (284) hide show
  1. package/.editorconfig +11 -0
  2. package/.gitignore +26 -0
  3. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  4. package/.idea/compiler.xml +6 -0
  5. package/.idea/custom-element-dist.iml +13 -0
  6. package/.idea/inspectionProfiles/Project_Default.xml +6 -0
  7. package/.idea/misc.xml +6 -0
  8. package/.idea/modules.xml +8 -0
  9. package/.idea/vcs.xml +6 -0
  10. package/.storybook/main.ts +21 -0
  11. package/.storybook/preview.ts +17 -0
  12. package/.vscode/settings.json +24 -0
  13. package/LICENSE +201 -0
  14. package/README.md +32 -0
  15. package/bin/build.sh +8 -0
  16. package/bin/clean.sh +5 -0
  17. package/bin/postinstall.sh +17 -0
  18. package/bin/start.sh +2 -0
  19. package/coverage/base.css +224 -0
  20. package/coverage/block-navigation.js +87 -0
  21. package/coverage/coverage-final.json +16 -0
  22. package/coverage/favicon.png +0 -0
  23. package/coverage/index.html +161 -0
  24. package/coverage/prettify.css +1 -0
  25. package/coverage/prettify.js +2 -0
  26. package/coverage/sort-arrow-sprite.png +0 -0
  27. package/coverage/sorter.js +196 -0
  28. package/coverage/src/coverage.svg +10 -0
  29. package/coverage/src/custom-element/coverage.svg +10 -0
  30. package/coverage/src/custom-element/custom-element.js/coverage.svg +10 -0
  31. package/coverage/src/custom-element/custom-element.js.html +2149 -0
  32. package/coverage/src/custom-element/http-request.js/coverage.svg +10 -0
  33. package/coverage/src/custom-element/http-request.js.html +352 -0
  34. package/coverage/src/custom-element/index.html +161 -0
  35. package/coverage/src/custom-element/local-storage.js/coverage.svg +10 -0
  36. package/coverage/src/custom-element/local-storage.js.html +346 -0
  37. package/coverage/src/custom-element/location-element.js/coverage.svg +10 -0
  38. package/coverage/src/custom-element/location-element.js.html +343 -0
  39. package/coverage/src/index.html +116 -0
  40. package/coverage/src/mocks/coverage.svg +10 -0
  41. package/coverage/src/mocks/handlers.ts/coverage.svg +10 -0
  42. package/coverage/src/mocks/handlers.ts.html +172 -0
  43. package/coverage/src/mocks/index.html +116 -0
  44. package/coverage/src/stories/attributes.stories.ts/coverage.svg +10 -0
  45. package/coverage/src/stories/attributes.stories.ts.html +481 -0
  46. package/coverage/src/stories/coverage.svg +10 -0
  47. package/coverage/src/stories/css.stories.ts/coverage.svg +10 -0
  48. package/coverage/src/stories/css.stories.ts.html +397 -0
  49. package/coverage/src/stories/dom-merge.stories.ts/coverage.svg +10 -0
  50. package/coverage/src/stories/dom-merge.stories.ts.html +424 -0
  51. package/coverage/src/stories/external-template.stories.ts/coverage.svg +10 -0
  52. package/coverage/src/stories/external-template.stories.ts.html +820 -0
  53. package/coverage/src/stories/http-request.stories.ts/coverage.svg +10 -0
  54. package/coverage/src/stories/http-request.stories.ts.html +817 -0
  55. package/coverage/src/stories/index.html +236 -0
  56. package/coverage/src/stories/local-storage.stories.ts/coverage.svg +10 -0
  57. package/coverage/src/stories/local-storage.stories.ts.html +1249 -0
  58. package/coverage/src/stories/location-element.stories.ts/coverage.svg +10 -0
  59. package/coverage/src/stories/location-element.stories.ts.html +484 -0
  60. package/coverage/src/stories/renderPlay.ts/coverage.svg +10 -0
  61. package/coverage/src/stories/renderPlay.ts.html +151 -0
  62. package/coverage/src/stories/slice-events.stories.ts/coverage.svg +10 -0
  63. package/coverage/src/stories/slice-events.stories.ts.html +436 -0
  64. package/coverage/src/sum.ts/coverage.svg +10 -0
  65. package/coverage/src/sum.ts.html +94 -0
  66. package/dist/confused.svg +37 -0
  67. package/dist/custom-element-B4v-KaIh.cjs +53 -0
  68. package/dist/custom-element-_g0GTup2.js +436 -0
  69. package/dist/custom-element-bundle.cjs +1 -0
  70. package/dist/custom-element-bundle.js +31 -0
  71. package/dist/embed-1.html +3 -0
  72. package/dist/html-template.html +126 -0
  73. package/dist/html-template.xhtml +45 -0
  74. package/dist/html-template.xml +45 -0
  75. package/dist/http-request-BOvP4KTl.js +56 -0
  76. package/dist/http-request-DPrY7mGh.cjs +1 -0
  77. package/dist/local-storage-Boafngui.cjs +1 -0
  78. package/dist/local-storage-BqDEu2kF.js +59 -0
  79. package/dist/location-element-2m0gWq_d.cjs +1 -0
  80. package/dist/location-element-nA_wsqBt.js +49 -0
  81. package/dist/mockServiceWorker.js +284 -0
  82. package/dist/tree.xsl +33 -0
  83. package/dist/vite.svg +1 -0
  84. package/index.html +17 -0
  85. package/package.json +97 -0
  86. package/public/confused.svg +37 -0
  87. package/public/embed-1.html +3 -0
  88. package/public/html-template.html +126 -0
  89. package/public/html-template.xhtml +45 -0
  90. package/public/html-template.xml +45 -0
  91. package/public/mockServiceWorker.js +284 -0
  92. package/public/tree.xsl +33 -0
  93. package/public/vite.svg +1 -0
  94. package/src/assets/lit.svg +1 -0
  95. package/src/custom-element/custom-element.d.ts +36 -0
  96. package/src/custom-element/custom-element.js +688 -0
  97. package/src/custom-element/demo/a.html +63 -0
  98. package/src/custom-element/demo/confused.svg +37 -0
  99. package/src/custom-element/demo/data-slices.html +184 -0
  100. package/src/custom-element/demo/dce-social-preview.png +0 -0
  101. package/src/custom-element/demo/demo.css +22 -0
  102. package/src/custom-element/demo/dom-merge.html +123 -0
  103. package/src/custom-element/demo/embed-1.html +3 -0
  104. package/src/custom-element/demo/external-template.html +179 -0
  105. package/src/custom-element/demo/hex-grid-dce.html +183 -0
  106. package/src/custom-element/demo/hex-grid-transform.png +0 -0
  107. package/src/custom-element/demo/hex-grid.html +66 -0
  108. package/src/custom-element/demo/html-template.html +126 -0
  109. package/src/custom-element/demo/html-template.xhtml +45 -0
  110. package/src/custom-element/demo/html-template.xml +45 -0
  111. package/src/custom-element/demo/http-request.html +143 -0
  112. package/src/custom-element/demo/local-storage.html +218 -0
  113. package/src/custom-element/demo/location-element.html +155 -0
  114. package/src/custom-element/demo/logo.png +0 -0
  115. package/src/custom-element/demo/parameters.html +70 -0
  116. package/src/custom-element/demo/s.xml +14 -0
  117. package/src/custom-element/demo/s.xslt +76 -0
  118. package/src/custom-element/demo/scoped-css.html +169 -0
  119. package/src/custom-element/demo/ss.html +57 -0
  120. package/src/custom-element/demo/table.xml +25 -0
  121. package/src/custom-element/demo/table.xsl +293 -0
  122. package/src/custom-element/demo/template.xsl +46 -0
  123. package/src/custom-element/demo/tree.xml +25 -0
  124. package/src/custom-element/demo/tree.xsl +33 -0
  125. package/src/custom-element/demo/wc-square.svg +1 -0
  126. package/src/custom-element/demo/xhtml-template.xhtml +45 -0
  127. package/src/custom-element/demo/z.html +62 -0
  128. package/src/custom-element/demo/z.xml +60 -0
  129. package/src/custom-element/http-request.js +89 -0
  130. package/src/custom-element/ide/IDE.md +31 -0
  131. package/src/custom-element/ide/customData-dce.json +112 -0
  132. package/src/custom-element/ide/customData-xsl.json +1018 -0
  133. package/src/custom-element/ide/web-types-dce.json +111 -0
  134. package/src/custom-element/ide/web-types-xsl.json +867 -0
  135. package/src/custom-element/index.html +168 -0
  136. package/src/custom-element/index.js +7 -0
  137. package/src/custom-element/local-storage.js +87 -0
  138. package/src/custom-element/location-element.js +87 -0
  139. package/src/custom-element.test.ts +10 -0
  140. package/src/index.css +38 -0
  141. package/src/mocks/handlers.ts +29 -0
  142. package/src/mocks/pokemons.mock.ts +13 -0
  143. package/src/stories/Configure.mdx +364 -0
  144. package/src/stories/assets/accessibility.png +0 -0
  145. package/src/stories/assets/accessibility.svg +5 -0
  146. package/src/stories/assets/addon-library.png +0 -0
  147. package/src/stories/assets/assets.png +0 -0
  148. package/src/stories/assets/avif-test-image.avif +0 -0
  149. package/src/stories/assets/context.png +0 -0
  150. package/src/stories/assets/discord.svg +15 -0
  151. package/src/stories/assets/docs.png +0 -0
  152. package/src/stories/assets/figma-plugin.png +0 -0
  153. package/src/stories/assets/github.svg +3 -0
  154. package/src/stories/assets/share.png +0 -0
  155. package/src/stories/assets/styling.png +0 -0
  156. package/src/stories/assets/testing.png +0 -0
  157. package/src/stories/assets/theming.png +0 -0
  158. package/src/stories/assets/tutorials.svg +12 -0
  159. package/src/stories/assets/youtube.svg +4 -0
  160. package/src/stories/attributes.stories.ts +132 -0
  161. package/src/stories/attributes.test.ts +14 -0
  162. package/src/stories/css.stories.ts +104 -0
  163. package/src/stories/css.test.ts +12 -0
  164. package/src/stories/dom-merge.stories.ts +113 -0
  165. package/src/stories/dom-merge.test.ts +12 -0
  166. package/src/stories/external-template.stories.ts +245 -0
  167. package/src/stories/external-template.test.ts +12 -0
  168. package/src/stories/http-request.stories.ts +244 -0
  169. package/src/stories/http-request.test.ts +29 -0
  170. package/src/stories/local-storage.stories.ts +388 -0
  171. package/src/stories/local-storage.test.ts +12 -0
  172. package/src/stories/location-element.stories.ts +133 -0
  173. package/src/stories/location-element.test.ts +14 -0
  174. package/src/stories/renderPlay.ts +22 -0
  175. package/src/stories/slice-events.stories.ts +117 -0
  176. package/src/stories/slice-events.test.ts +12 -0
  177. package/src/sum.test.ts +6 -0
  178. package/src/sum.ts +4 -0
  179. package/src/vite-env.d.ts +1 -0
  180. package/storybook-static/assets/Color-RQJUDNI5-C4yZhNbM.js +1 -0
  181. package/storybook-static/assets/Configure-C7d36rng.js +173 -0
  182. package/storybook-static/assets/DocsRenderer-K4EAMTCU-BLMupvSb.js +2 -0
  183. package/storybook-static/assets/WithTooltip-Y7J54OF7-BAQSPSFk.js +1 -0
  184. package/storybook-static/assets/accessibility-W_h2acOZ.png +0 -0
  185. package/storybook-static/assets/addon-library-BWUCAmyN.png +0 -0
  186. package/storybook-static/assets/attributes.stories-ZB0RTY1d.js +151 -0
  187. package/storybook-static/assets/context-C0qIqeS4.png +0 -0
  188. package/storybook-static/assets/css.stories-CLSX-Xxd.js +86 -0
  189. package/storybook-static/assets/custom-element-BLZZ00dz.js +53 -0
  190. package/storybook-static/assets/docs---vsFbMi.png +0 -0
  191. package/storybook-static/assets/dom-merge.stories-CgHZUABU.js +138 -0
  192. package/storybook-static/assets/entry-preview-CQqNFx4W.js +8 -0
  193. package/storybook-static/assets/entry-preview-docs-CWgqLfd3.js +2 -0
  194. package/storybook-static/assets/external-template.stories-DtSLMxvg.js +316 -0
  195. package/storybook-static/assets/figma-plugin-CH2hELiO.png +0 -0
  196. package/storybook-static/assets/formatter-B5HCVTEV-tKeEfJA9.js +58 -0
  197. package/storybook-static/assets/http-request.stories-CUzlXO89.js +300 -0
  198. package/storybook-static/assets/iframe-gCvlWuoC.js +2 -0
  199. package/storybook-static/assets/index-CBQwM6ST.js +508 -0
  200. package/storybook-static/assets/index-CDavW7r9.js +193 -0
  201. package/storybook-static/assets/index-CQA5dlr6.js +13 -0
  202. package/storybook-static/assets/index-Cc7K62zD.js +3 -0
  203. package/storybook-static/assets/index-DgaNIR0t.js +1 -0
  204. package/storybook-static/assets/index-Dkj0J1ds.js +1 -0
  205. package/storybook-static/assets/index-DnEJ_bKa.js +1 -0
  206. package/storybook-static/assets/index-DrFu-skq.js +6 -0
  207. package/storybook-static/assets/lit-element-B4_0akdT.js +19 -0
  208. package/storybook-static/assets/local-storage.stories-BkO6djDz.js +415 -0
  209. package/storybook-static/assets/location-element.stories-DCIOUd0D.js +108 -0
  210. package/storybook-static/assets/preview-B4GcaC1c.js +1 -0
  211. package/storybook-static/assets/preview-B63p-W8V.js +20 -0
  212. package/storybook-static/assets/preview-BAz7FMXc.js +396 -0
  213. package/storybook-static/assets/preview-BDY5ThwJ.js +1 -0
  214. package/storybook-static/assets/preview-C6t8KBFr.js +1 -0
  215. package/storybook-static/assets/preview-CYD85dwb.js +7 -0
  216. package/storybook-static/assets/preview-CkgAD_DE.js +2 -0
  217. package/storybook-static/assets/preview-D8LadFCz.js +48 -0
  218. package/storybook-static/assets/preview-DNpCpRPf.js +1 -0
  219. package/storybook-static/assets/preview-PxUn-cIn.js +1 -0
  220. package/storybook-static/assets/share-DGA-UcQf.png +0 -0
  221. package/storybook-static/assets/slice-events.stories-DXKjXI37.js +115 -0
  222. package/storybook-static/assets/styling-Bk6zjRzU.png +0 -0
  223. package/storybook-static/assets/syntaxhighlighter-JOJW2KGS-C04pIVD3.js +1 -0
  224. package/storybook-static/assets/testing-cbzR9l9r.png +0 -0
  225. package/storybook-static/assets/theming-D6WJLNoW.png +0 -0
  226. package/storybook-static/assets/tiny-invariant-BxWVcicq.js +1 -0
  227. package/storybook-static/confused.svg +37 -0
  228. package/storybook-static/embed-1.html +3 -0
  229. package/storybook-static/favicon.svg +7 -0
  230. package/storybook-static/html-template.html +126 -0
  231. package/storybook-static/html-template.xhtml +45 -0
  232. package/storybook-static/html-template.xml +45 -0
  233. package/storybook-static/iframe.html +492 -0
  234. package/storybook-static/index.html +163 -0
  235. package/storybook-static/index.json +1 -0
  236. package/storybook-static/mockServiceWorker.js +284 -0
  237. package/storybook-static/project.json +1 -0
  238. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +327 -0
  239. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +40 -0
  240. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +3 -0
  241. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js.LEGAL.txt +0 -0
  242. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +12 -0
  243. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js.LEGAL.txt +0 -0
  244. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +60 -0
  245. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +18 -0
  246. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +3 -0
  247. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js.LEGAL.txt +0 -0
  248. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +3 -0
  249. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js.LEGAL.txt +0 -0
  250. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +3 -0
  251. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js.LEGAL.txt +0 -0
  252. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +3 -0
  253. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js.LEGAL.txt +0 -0
  254. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +33 -0
  255. package/storybook-static/sb-addons/interactions-10/manager-bundle.js.LEGAL.txt +0 -0
  256. package/storybook-static/sb-addons/links-1/manager-bundle.js +3 -0
  257. package/storybook-static/sb-addons/links-1/manager-bundle.js.LEGAL.txt +0 -0
  258. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +3 -0
  259. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
  260. package/storybook-static/sb-common-assets/fonts.css +31 -0
  261. package/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  262. package/storybook-static/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  263. package/storybook-static/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  264. package/storybook-static/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  265. package/storybook-static/sb-manager/WithTooltip-Y7J54OF7-CEHQ77YF.js +1 -0
  266. package/storybook-static/sb-manager/chunk-E3WK6ZOZ.js +234 -0
  267. package/storybook-static/sb-manager/chunk-E6ABNH5R.js +183 -0
  268. package/storybook-static/sb-manager/chunk-FEE35O7J.js +9 -0
  269. package/storybook-static/sb-manager/chunk-S4VOIVUE.js +347 -0
  270. package/storybook-static/sb-manager/chunk-XCO5HRLK.js +6 -0
  271. package/storybook-static/sb-manager/chunk-XP3HGWTR.js +1 -0
  272. package/storybook-static/sb-manager/formatter-B5HCVTEV-7DCBOGO6.js +58 -0
  273. package/storybook-static/sb-manager/globals-module-info.js +1 -0
  274. package/storybook-static/sb-manager/globals-runtime.js +1 -0
  275. package/storybook-static/sb-manager/globals.js +1 -0
  276. package/storybook-static/sb-manager/index.js +1 -0
  277. package/storybook-static/sb-manager/runtime.js +1 -0
  278. package/storybook-static/sb-manager/syntaxhighlighter-JOJW2KGS-VF6EEVPI.js +1 -0
  279. package/storybook-static/sb-preview/globals.js +1 -0
  280. package/storybook-static/sb-preview/runtime.js +139 -0
  281. package/storybook-static/tree.xsl +33 -0
  282. package/storybook-static/vite.svg +1 -0
  283. package/tsconfig.json +25 -0
  284. package/vite.config.js +55 -0
package/src/custom-element/demo/scoped-css.html ADDED
@@ -0,0 +1,169 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>CSS scoping - 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;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ flex: auto;
18
+ box-shadow: inset silver 0 0 1rem;
19
+ min-width: 12rem;
20
+ padding: 1rem;
21
+ color: coral;
22
+ text-shadow: 1px 1px silver;
23
+ font-weight: bolder;
24
+ }
25
+
26
+ caption {
27
+ padding: 1rem;
28
+ font-weight: bolder;
29
+ font-family: sans-serif;
30
+ }
31
+
32
+ code {
33
+ text-align: right;
34
+ min-width: 3rem;
35
+ }
36
+
37
+ </style>
38
+ </head>
39
+ <body>
40
+
41
+ <nav>
42
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
43
+ <h3>DOM merge. DCE dynamic update with focus preservation.</h3>
44
+ </nav>
45
+
46
+ <html-demo-element legend="1. STYLE tag css rules are scoped within element "
47
+ description="Green button borders should not be applied to external button ">
48
+ <template>
49
+ <custom-element>
50
+ <template><!-- template needed to avoid styles leaking into global HTML -->
51
+ <style>
52
+ button{ border: 0.2rem dashed green; }
53
+ </style>
54
+ <button>Green dashed border</button>
55
+ </template>
56
+ </custom-element>
57
+ <button>Default border</button>
58
+ </template>
59
+ </html-demo-element>
60
+
61
+ <html-demo-element legend="2. DCE with tag "
62
+ description="Blue borders only within 2 DCE instances">
63
+ <template>
64
+ <custom-element tag="dce-1">
65
+ <template><!-- template needed to avoid styles leaking into global HTML -->
66
+ <style>
67
+ button{ border: 0.2rem dotted blue; }
68
+ </style>
69
+ <button><slot>Blue borders</slot></button>
70
+ </template>
71
+ </custom-element>
72
+ <button>Default border</button>
73
+ <dce-1>1st</dce-1>
74
+ <dce-1>2nd</dce-1>
75
+ </template>
76
+ </html-demo-element>
77
+
78
+ <html-demo-element legend="3. Override style in DCE payload "
79
+ description="Red borders only for last DCE instance">
80
+ <template>
81
+ <custom-element tag="dce-2">
82
+ <template><!-- template needed to avoid styles leaking into global HTML -->
83
+ <style>
84
+ button{ border: 0.2rem dashed blue; }
85
+ </style>
86
+ <button><slot>Blue borders</slot></button>
87
+ </template>
88
+ </custom-element>
89
+ <button>Default border</button>
90
+ <dce-2>1st</dce-2>
91
+ <dce-2>
92
+ <template> <!-- template needed to avoid styles leaking into global HTML -->
93
+ <style>button{border-color:red;}</style>
94
+ Red border
95
+ <b>2</b>
96
+ 3
97
+ <b>4</b>
98
+ </template>
99
+ </dce-2>
100
+ </template>
101
+ </html-demo-element>
102
+
103
+
104
+ <html-demo-element legend="4. simple internal override "
105
+ description="green label with blue text button ">
106
+ <template>
107
+ <custom-element>
108
+ <template>
109
+ <style>
110
+ color:green;
111
+ b{ color: blue;}
112
+ input:checked+b{ color: darkblue; text-shadow: 0 0 4px springgreen;}
113
+ </style>
114
+ <label>
115
+ green
116
+ <input type="checkbox" value="Glowing Blue" checked/><b>blue</b>
117
+ </label>
118
+ </template>
119
+ </custom-element>
120
+
121
+ </template>
122
+ </html-demo-element>
123
+
124
+
125
+ <html-demo-element legend="5. External template( inline lib )"
126
+ description="green label with blue text button ">
127
+ <template>
128
+ <template id="template-5">
129
+ <style>
130
+ color:green;
131
+ i{ color: blue;}
132
+ </style>
133
+ <p>
134
+ green
135
+ <i>blue</i>
136
+ </p>
137
+ </template>
138
+ <custom-element src="#template-5"></custom-element>
139
+
140
+ </template>
141
+ </html-demo-element>
142
+
143
+ <html-demo-element legend="6. External template( ext lib )"
144
+ description="Grid with 8 hex shaped buttons with text and icon ">
145
+ <template>
146
+ <a href="hex-grid-dce.html">hex-grid-dce.html</a>
147
+ <custom-element src="hex-grid-dce.html#hex-grid-template">
148
+ <template>
149
+ <style>nav{--hex-grid-size: 5rem; margin-left:2rem; }</style>
150
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
151
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
152
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
153
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
154
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
155
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
156
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
157
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
158
+ </template>
159
+ </custom-element>
160
+
161
+ </template>
162
+ </html-demo-element>
163
+
164
+
165
+
166
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
167
+
168
+ </body>
169
+ </html>
package/src/custom-element/demo/ss.html ADDED
@@ -0,0 +1,57 @@
1
+ <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1"><http-request xmlns="" url="/reflect" slice="page" data-dce-id="2"></http-request><p xmlns="" data-dce-id="3">Pokemon Count: 6</p>
2
+ <ul xmlns="" data-dce-id="6">
3
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">request</dce-text></var><div data-dce-id="9">
4
+ <var data-dce-id="10">@url</var><dce-text data-dce-id="11">
5
+ =
6
+ </dce-text><code data-testid="attr-url" data-dce-id="12">/reflect</code>
7
+ </div>
8
+ <div data-dce-id="9-1">
9
+ <var data-dce-id="10">@data-dce-id</var><dce-text data-dce-id="11">
10
+ =
11
+ </dce-text><code data-testid="attr-data-dce-id" data-dce-id="12">2</code>
12
+ </div>
13
+ </ul>
14
+ <ul xmlns="" data-dce-id="6-1">
15
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">response</dce-text></var><div data-dce-id="9">
16
+ <var data-dce-id="10">@ok</var><dce-text data-dce-id="11">
17
+ =
18
+ </dce-text><code data-testid="attr-ok" data-dce-id="12">true</code>
19
+ </div>
20
+ <div data-dce-id="9-1">
21
+ <var data-dce-id="10">@status</var><dce-text data-dce-id="11">
22
+ =
23
+ </dce-text><code data-testid="attr-status" data-dce-id="12">200</code>
24
+ </div>
25
+ <div data-dce-id="9-2">
26
+ <var data-dce-id="10">@statusText</var><dce-text data-dce-id="11">
27
+ =
28
+ </dce-text><code data-testid="attr-statusText" data-dce-id="12">OK</code>
29
+ </div>
30
+ <div data-dce-id="9-3">
31
+ <var data-dce-id="10">@type</var><dce-text data-dce-id="11">
32
+ =
33
+ </dce-text><code data-testid="attr-type" data-dce-id="12">basic</code>
34
+ </div>
35
+ <div data-dce-id="9-4">
36
+ <var data-dce-id="10">@url</var><dce-text data-dce-id="11">
37
+ =
38
+ </dce-text><code data-testid="attr-url" data-dce-id="12">http://localhost:5173/reflect</code>
39
+ </div>
40
+ <div data-dce-id="9-5">
41
+ <var data-dce-id="10">@redirected</var><dce-text data-dce-id="11">
42
+ =
43
+ </dce-text><code data-testid="attr-redirected" data-dce-id="12">false</code>
44
+ </div>
45
+ </ul><button xmlns="" data-dce-id="5">bulbasaur</button><button xmlns="" data-dce-id="5-1">ivysaur</button><button xmlns="" data-dce-id="5-2">venusaur</button><button xmlns="" data-dce-id="5-3">charmander</button><button xmlns="" data-dce-id="5-4">charmeleon</button><button xmlns="" data-dce-id="5-5">charizard</button>
46
+ <ul xmlns="" data-dce-id="6-2">
47
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">data</dce-text></var><div data-dce-id="9">
48
+ <var data-dce-id="10">@count</var><dce-text data-dce-id="11">
49
+ =
50
+ </dce-text><code data-testid="attr-count" data-dce-id="12">1279</code>
51
+ </div>
52
+ <div data-dce-id="9-1">
53
+ <var data-dce-id="10">@next</var><dce-text data-dce-id="11">
54
+ =
55
+ </dce-text><code data-testid="attr-next" data-dce-id="12">https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6</code>
56
+ </div>
57
+ </ul></dce-root>
package/src/custom-element/demo/table.xml ADDED
@@ -0,0 +1,25 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <?xml-stylesheet type="text/xsl" href="table.xsl"?>
3
+ <div xmlns="http://www.w3.org/1999/xhtml">
4
+ <payload>
5
+ <span slot=""></span>
6
+ <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
7
+ the seed grows in size as the Pokémon does.
8
+ </p>
9
+ <span slot=""></span>
10
+ <ul slot="">
11
+ <li pokemon-id="2">ivysaur</li>
12
+ <li pokemon-id="3">venusaur</li>
13
+ </ul>
14
+ <span slot=""></span>
15
+ </payload>
16
+ <attributes>
17
+ <title>bulbasaur</title>
18
+ <data-smile>👼</data-smile>
19
+ <pokemon-id>1</pokemon-id>
20
+ </attributes>
21
+ <dataset>
22
+ <smile>👼</smile>
23
+ </dataset>
24
+ <slice></slice>
25
+ </div>
package/src/custom-element/demo/table.xsl ADDED
@@ -0,0 +1,293 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <xsl:stylesheet version="1.0"
3
+ xmlns="http://www.w3.org/1999/xhtml"
4
+ xmlns:xhtml="http://www.w3.org/1999/xhtml"
5
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
6
+ xmlns:func="http://exslt.org/functions"
7
+ xmlns:my="my://own.uri"
8
+ xmlns:xv="http://xmlaspect.org/XmlView"
9
+ xmlns:exslt="http://exslt.org/common"
10
+ xmlns:msxsl="urn:schemas-microsoft-com:xslt"
11
+ exclude-result-prefixes="xhtml exslt msxsl"
12
+ extension-element-prefixes="func"
13
+ >
14
+ <xsl:output
15
+ method="html"
16
+ omit-xml-declaration="yes"
17
+ standalone="yes"
18
+ indent="yes"
19
+ />
20
+ <!--
21
+ let processor = new XSLTProcessor(); // starts the XSL processor
22
+ processor.setParameter(null, "baseUrl", new URL('./', import.meta.url).pathname);
23
+ -->
24
+ <xsl:param name="url" />
25
+ <xsl:param name="baseUrl" select="substring-before(substring-after(/processing-instruction('xml-stylesheet'),'href=&quot;'),'table.xsl&quot;')" />
26
+ <xsl:param name="sort" />
27
+ <!-- select = "exslt:node-set($x) IE compatibility -->
28
+ <msxsl:script language="JScript" implements-prefix="exslt">
29
+ <![CDATA[
30
+ var dd = eval("this['node-set'] = function (x) { return x; }");
31
+ ]]>
32
+ </msxsl:script>
33
+
34
+ <xsl:variable name="sorts" select="//xsl:sort" />
35
+
36
+ <func:function name="my:count-elements">
37
+ <func:result select="count(//*)" />
38
+ </func:function>
39
+
40
+ <xsl:template match="/">
41
+ <style>
42
+ body{padding:0;margin:0;}
43
+ table {border-collapse:collapse; width:100%; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
44
+ caption{ text-align:left; }
45
+ th {background-image: linear-gradient(to bottom, #0F1FFF 0%, #AAAACC 100%); font-size:large;}
46
+ tr:nth-child(even) {background-image: linear-gradient(to bottom, rgba(9, 16, 11, 0.2) 0%, rgba(90, 164, 110, 0.1) 100%);}
47
+ tr:nth-child(odd) {background: rgba(255,255,255,0.2);}
48
+ td{font-size:small;border-bottom: none;border-top: none;}
49
+ th a{ color: #FFFF80; text-decoration:none; display:block;}
50
+ th a span{float:left;}
51
+ div>label, div>var{ margin-right:0.5em;}
52
+
53
+ fieldset{border-radius: 1em;border-bottom: none;border-left: none;}
54
+
55
+ /* collapse and select UI */
56
+ fieldset legend label{ cursor:pointer;}
57
+ input[type='checkbox']{ display:none;}
58
+
59
+ input[type='checkbox']:checked+fieldset{ border:2px solid red; }
60
+ input[type='checkbox']:checked+input+fieldset div,
61
+ input[type='checkbox']:checked+input+fieldset legend label.collapse i,
62
+ input[type='checkbox']:checked+fieldset .select i,
63
+ input[type='checkbox']+fieldset .collapse b,
64
+ input[type='checkbox']+fieldset .select b
65
+ {display:none; }
66
+
67
+ input[type='checkbox']:checked+input+fieldset .collapse b,
68
+ input[type='checkbox']+input:checked+fieldset .select b
69
+ { display:inline;}
70
+
71
+ legend label{ text-shadow: -1px -1px 1px #fff, -1px 0px 1px #fff, 0px -1px 1px #fff, 1px 1px 1px #999, 0px 1px 1px #999, 1px 0px 1px #999, 1px 1px 5px #113;}
72
+ legend label b, legend label i{ margin-right: 0.5em; }
73
+ </style>
74
+ <xsl:variable name="sortedData">
75
+ <xsl:call-template name="StartSort">
76
+ <xsl:with-param name="data" select="*" />
77
+ </xsl:call-template>
78
+ </xsl:variable>
79
+ <div class="XmlViewRendered">
80
+ <xsl:apply-templates select="exslt:node-set($sortedData)" mode="DisplayAs"/>
81
+ </div>
82
+ </xsl:template>
83
+ <xsl:template match="/" priority="-20" name="BodyOnly">
84
+ <xsl:variable name="sortedData">
85
+ <xsl:call-template name="StartSort">
86
+ <xsl:with-param name="data" select="*" />
87
+ </xsl:call-template>
88
+ </xsl:variable>
89
+ <xsl:apply-templates select="exslt:node-set($sortedData)" mode="DisplayAs"/>
90
+ </xsl:template>
91
+
92
+ <xsl:template name="StartSort">
93
+ <xsl:param name="data"/>
94
+ <xsl:param name="sortNode"/>
95
+ <xsl:apply-templates mode="SortData" select="$data">
96
+ <xsl:with-param name="sortNode" select="$sortNode" />
97
+ </xsl:apply-templates>
98
+ </xsl:template>
99
+
100
+
101
+
102
+ <xsl:template mode="SortData" match="*[*]" name="SortDataDefault">
103
+ <xsl:copy>
104
+ <xsl:copy-of select="@*"/>
105
+ <xsl:apply-templates mode="SortData" select="*">
106
+ <xsl:sort data-type="text" order="ascending" select="@stub-will-be-replaced"/>
107
+ </xsl:apply-templates>
108
+ </xsl:copy>
109
+ </xsl:template>
110
+
111
+ <xsl:template mode="SortData" match="*[not(*)]">
112
+ <xsl:copy><xsl:copy-of select="@*"/><xsl:value-of select="."/></xsl:copy>
113
+ </xsl:template>
114
+
115
+ <!-- skip XmlView injected data from sorting results -->
116
+ <xsl:template mode="SortData" match="*[@priority='100']" priority="300"></xsl:template>
117
+ <xsl:template mode="DisplayAsTable" match="*[@priority='100']" priority="300"></xsl:template>
118
+
119
+ <xsl:template mode="DisplayAs" match="*" ><!-- distinct tags, match to 1st -->
120
+ <xsl:variable name="tagName" select="name()" />
121
+ <xsl:choose>
122
+ <xsl:when test="count( ../*[name()=$tagName]) != 1">
123
+ <xsl:apply-templates select="." mode="DisplayAsTable" />
124
+ </xsl:when>
125
+ <xsl:otherwise>
126
+ <xsl:apply-templates select="." mode="DisplayAsTree" />
127
+ </xsl:otherwise>
128
+ </xsl:choose>
129
+ </xsl:template>
130
+ <xsl:template mode="DisplayAs" match="@*" >
131
+ <b><xsl:value-of select="name()"/></b>=<var><xsl:value-of select="."/></var>
132
+ </xsl:template>
133
+ <xsl:template mode="DisplayAsTree" match="*[not(*)]" priority="20">
134
+ <div><label><xsl:value-of select="name()"/></label>
135
+ <xsl:apply-templates select="@*" mode="DisplayAs"/>
136
+ <var><xsl:value-of select="."/></var>
137
+ </div>
138
+ </xsl:template>
139
+
140
+ <xsl:template mode="DisplayAsTree" match="*" >
141
+ <xsl:variable name="xPath"><xsl:apply-templates mode="xpath" select="."/></xsl:variable>
142
+ <input type="checkbox" id="collapse{$xPath}" class="collapseControl"/>
143
+ <input type="checkbox" id="select{$xPath}"/>
144
+ <fieldset>
145
+ <legend><label for="collapse{$xPath}" class="collapse"><b>&#9654;</b><i>&#9660;</i></label> <label for="select{$xPath}" class="select"><b>&#10004;</b><i>&#10003;</i></label> <xsl:value-of select="name()"/></legend>
146
+ <div>
147
+ <xsl:apply-templates select="." mode="DisplayContent"/>
148
+ </div>
149
+ </fieldset>
150
+ </xsl:template>
151
+ <xsl:template mode="DisplayContent" match="*">
152
+ <xsl:for-each select="@*|*">
153
+ <xsl:variable name="tagName" select="name()"/>
154
+
155
+ <xsl:if test="not(preceding-sibling::*[name()=$tagName])">
156
+ <xsl:apply-templates select="." mode="DisplayAs"/>
157
+ </xsl:if>
158
+ </xsl:for-each>
159
+ <xsl:if test="normalize-space(text()) != '' ">
160
+ <p><xsl:value-of select="text()"/></p>
161
+ </xsl:if>
162
+ </xsl:template>
163
+
164
+ <xsl:template match="*" mode="DisplayAsTable" >
165
+ <xsl:param name="childName" select="name()"/>
166
+ <xsl:variable name="ZZheaders" select="@*|*" /> <!-- first child attributes and its children -->
167
+ <!-- TODO union of unique child names as not all rows have same children set. When sorting the missing attributes changing number of columns -->
168
+ <xsl:variable name="collection" select=".."/>
169
+ <xsl:variable name="collectionPath"><xsl:apply-templates mode="xpath" select=".."></xsl:apply-templates></xsl:variable>
170
+
171
+ <xsl:variable name="hAll">
172
+ <xsl:for-each select="*|@*">
173
+ <xsl:variable name="p" select="name()"/>
174
+ <xsl:choose>
175
+ <xsl:when test="count(.|../@*)=count(../@*)"><xsl:element name="{$p}"><xsl:attribute name="xv" ><xsl:value-of select="$p" /></xsl:attribute></xsl:element></xsl:when>
176
+ <xsl:when test="count( preceding-sibling::*[name()=$p]) != 0"></xsl:when>
177
+ <xsl:otherwise><xsl:copy/></xsl:otherwise>
178
+ </xsl:choose>
179
+ </xsl:for-each>
180
+ </xsl:variable>
181
+ <xsl:variable name="headers" select="exslt:node-set($hAll)/*" />
182
+ <table border="1">
183
+ <caption><!-- todo collapsible -->
184
+ <var>
185
+ <xsl:attribute name="title"><xsl:value-of select="$collectionPath"/>/<xsl:value-of select="$childName"/></xsl:attribute>
186
+ <xsl:value-of select="$childName"/>
187
+ </var>
188
+ </caption>
189
+ <thead>
190
+ <tr>
191
+ <xsl:for-each select="$headers">
192
+ <xsl:variable name="p" ><xsl:if test="name(.)=@xv">@</xsl:if><xsl:value-of select="local-name()"/></xsl:variable>
193
+ <xsl:variable name="fullPath" ><xsl:value-of select="$collectionPath"/>/<xsl:value-of select="$p"/></xsl:variable>
194
+ <xsl:variable name ="direction" >
195
+ <xsl:for-each select="$sorts">
196
+ <xsl:if test="@select=$p">
197
+ <xsl:choose>
198
+ <xsl:when test="@order='ascending'">&#9650;</xsl:when>
199
+ <xsl:when test="@order='descending'">&#9660;</xsl:when>
200
+ <xsl:otherwise>&#9674;</xsl:otherwise>
201
+ </xsl:choose>
202
+ </xsl:if>
203
+ </xsl:for-each>
204
+ </xsl:variable>
205
+ <xsl:variable name ="order" >
206
+ <xsl:for-each select="$sorts">
207
+ <xsl:if test="@select=$p">
208
+ <xsl:value-of select="count(preceding-sibling::xsl:sort) "/>
209
+ </xsl:if>
210
+ </xsl:for-each>
211
+ </xsl:variable>
212
+
213
+ <th><a href="#"
214
+ title="{$p}"
215
+ xv:sortpath="{$p}"
216
+ ><span><xsl:value-of select="$direction"/> <sub><xsl:value-of select="$order"/> </sub></span>
217
+
218
+ <xsl:value-of select="local-name()"/>
219
+ </a>
220
+ </th>
221
+ </xsl:for-each>
222
+ </tr>
223
+ </thead>
224
+ <tbody>
225
+ <xsl:for-each select="../*[name()=$childName]">
226
+ <xsl:variable name="rowNode" select="." />
227
+ <tr>
228
+ <xsl:for-each select="$headers">
229
+ <xsl:variable name="key" select="name()" />
230
+ <td>
231
+ <!-- xsl:attribute name="title"><xsl:apply-templates mode="xpath" select="."></xsl:apply-templates></xsl:attribute -->
232
+
233
+ <xsl:choose>
234
+ <xsl:when test="count( $rowNode/*[name()=$key]) &gt; 1">
235
+ <xsl:apply-templates select="$rowNode/*[name()=$key][1]" mode="DisplayAsTable" />
236
+ </xsl:when>
237
+ <xsl:otherwise>
238
+ <xsl:apply-templates mode="DisplayContent" select="$rowNode/*[name()=$key]|$rowNode/@*[name()=$key]" />
239
+ </xsl:otherwise>
240
+ </xsl:choose>
241
+
242
+ </td>
243
+ </xsl:for-each>
244
+ </tr>
245
+ </xsl:for-each>
246
+ </tbody>
247
+ </table>
248
+ </xsl:template>
249
+
250
+ <!-- XmlAspect/XOR/XPath/Dom2XPath.xsl -->
251
+ <!-- Root -->
252
+ <xsl:template match="/" mode="xpath">
253
+ <xsl:text>/</xsl:text>
254
+ </xsl:template>
255
+
256
+ <!-- Element -->
257
+ <xsl:template match="*" mode="xpath">
258
+ <!-- Process ancestors first -->
259
+ <xsl:apply-templates select=".." mode="xpath"/>
260
+
261
+ <!-- Output / if not already output by the root node -->
262
+ <xsl:if test="../..">/</xsl:if>
263
+
264
+ <!-- Output the name of the element -->
265
+ <xsl:value-of select="name()"/>
266
+
267
+ <!-- Add the element's position to pinpoint the element exactly -->
268
+ <xsl:if test="count(../*[name() = name(current())]) > 1">
269
+ <xsl:text>[</xsl:text>
270
+ <xsl:value-of
271
+ select="count(preceding-sibling::*[name() = name(current())]) +1"/>
272
+ <xsl:text>]</xsl:text>
273
+ </xsl:if>
274
+
275
+ <!-- Add 'name' predicate as a hint of which element -->
276
+ <xsl:if test="@name">
277
+ <xsl:text/>[@name="<xsl:value-of select="@name"/>"]<xsl:text/>
278
+ </xsl:if>
279
+ </xsl:template>
280
+
281
+ <!-- Attribute -->
282
+ <xsl:template match="@*" mode="xpath">
283
+ <!-- Process ancestors first -->
284
+ <xsl:apply-templates select=".." mode="xpath"/>
285
+
286
+ <!-- Output the name of the attribute -->
287
+ <xsl:text/>/@<xsl:value-of select="name()"/>
288
+
289
+ <!-- Output the attribute's value as a predicate -->
290
+ <xsl:text/>[.="<xsl:value-of select="."/>"]<xsl:text/>
291
+ </xsl:template>
292
+
293
+ </xsl:stylesheet>
package/src/custom-element/demo/template.xsl ADDED
@@ -0,0 +1,46 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
3
+ <xsl:output method="html"/>
4
+
5
+ <xsl:template match="/">
6
+ <xsl:apply-templates select="//attributes"/>
7
+ </xsl:template>
8
+ <xsl:template match="attributes">
9
+ <h3 xmlns="http://www.w3.org/1999/xhtml">
10
+ <xsl:value-of select="title"></xsl:value-of>
11
+ </h3> <!-- title is an attribute in instance
12
+ mapped into /*/attributes/title -->
13
+ <xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//smile"> <!-- data-smile DCE instance attribute,
14
+ mapped into /*/dataset/smile
15
+ used in condition -->
16
+ <!-- data-smile DCE instance attribute, used as HTML -->
17
+ <div>Smile as:
18
+ <xsl:value-of select="//smile"></xsl:value-of>
19
+ </div>
20
+ </xsl:if>
21
+ <!-- image would not be visible in sandbox, see live demo -->
22
+ <img xmlns="http://www.w3.org/1999/xhtml"
23
+ src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
24
+ alt="{title} image"/>
25
+ <!-- image-src and title are DCE instance attributes,
26
+ mapped into /*/attributes/
27
+ used within output attribute via curly brackets -->
28
+
29
+ <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
30
+ <p xmlns="http://www.w3.org/1999/xhtml">
31
+ <xsl:value-of select="//*[@slot=&quot;description&quot;]"/>
32
+ </p>
33
+ <xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
34
+ <!-- loop over payload elements with `pokemon-id` attribute -->
35
+ <button>
36
+ <img height="32"
37
+ src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
38
+ alt="{text()}"/>
39
+ <br/>
40
+ <xsl:value-of select="text()">
41
+ </xsl:value-of>
42
+ </button>
43
+
44
+ </xsl:for-each>
45
+ </xsl:template>
46
+ </xsl:stylesheet>
package/src/custom-element/demo/tree.xml ADDED
@@ -0,0 +1,25 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <?xml-stylesheet type="text/xsl" href="tree.xsl"?>
3
+ <div xmlns="http://www.w3.org/1999/xhtml">
4
+ <payload>
5
+ <span slot=""></span>
6
+ <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
7
+ the seed grows in size as the Pokémon does.
8
+ </p>
9
+ <span slot=""></span>
10
+ <ul slot="">
11
+ <li pokemon-id="2">ivysaur</li>
12
+ <li pokemon-id="3">venusaur</li>
13
+ </ul>
14
+ <span slot=""></span>
15
+ </payload>
16
+ <attributes>
17
+ <title>bulbasaur</title>
18
+ <data-smile>👼</data-smile>
19
+ <pokemon-id>1</pokemon-id>
20
+ </attributes>
21
+ <dataset>
22
+ <smile>👼</smile>
23
+ </dataset>
24
+ <slice></slice>
25
+ </div>
package/src/custom-element/demo/tree.xsl ADDED
@@ -0,0 +1,33 @@
1
+ <xsl:stylesheet version="1.0"
2
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <xsl:output
4
+ method="html"
5
+ omit-xml-declaration="yes"
6
+ standalone="yes"
7
+ indent="yes"
8
+ />
9
+
10
+ <xsl:template match="/">
11
+ <xsl:apply-templates select="*"/>
12
+ </xsl:template>
13
+ <xsl:template match="*">
14
+ <details style="padding:0 1rem" open="open">
15
+ <summary>
16
+ <b style="color:green"><xsl:value-of select="name()"/></b>
17
+ <xsl:apply-templates select="@*"/>
18
+ </summary>
19
+ <xsl:value-of select="./text()"/>
20
+ <xsl:apply-templates select="*"/>
21
+ </details>
22
+ </xsl:template>
23
+ <xsl:template match="@*">
24
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
25
+ </xsl:template>
26
+ <xsl:template match="text()">
27
+ <p>
28
+ <xsl:value-of select="."/>
29
+ </p>
30
+ </xsl:template>
31
+
32
+
33
+ </xsl:stylesheet>