@epa-wg/custom-element 0.0.11 → 0.0.13

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 (47) hide show
  1. package/.idea/inspectionProfiles/Project_Default.xml +22 -7
  2. package/.idea/misc.xml +4 -5
  3. package/.vs/VSWorkspaceState.json +8 -0
  4. package/.vs/custom-element/FileContentIndex/1487e471-3751-47bc-a499-d78eda924eda.vsidx +0 -0
  5. package/.vs/custom-element/v17/.wsuo +0 -0
  6. package/.vs/slnx.sqlite +0 -0
  7. package/README.md +71 -19
  8. package/custom-element.js +241 -66
  9. package/demo/a.html +25 -11
  10. package/demo/confused.svg +36 -36
  11. package/demo/dom-merge.html +124 -0
  12. package/demo/embed-1.html +2 -2
  13. package/demo/external-template.html +9 -7
  14. package/demo/hex-grid-dce.html +183 -0
  15. package/demo/hex-grid-transform.png +0 -0
  16. package/demo/hex-grid.html +66 -0
  17. package/demo/html-template.html +125 -12
  18. package/demo/html-template.xhtml +44 -44
  19. package/demo/html-template.xml +44 -44
  20. package/demo/http-request.html +44 -57
  21. package/demo/local-storage.html +23 -18
  22. package/demo/location-element.html +59 -58
  23. package/demo/s.xml +1 -0
  24. package/demo/s.xslt +159 -0
  25. package/demo/scoped-css.html +170 -0
  26. package/demo/ss.html +32 -0
  27. package/demo/table.xml +24 -24
  28. package/demo/table.xsl +292 -292
  29. package/demo/template.xsl +45 -45
  30. package/demo/tree.xml +24 -24
  31. package/demo/tree.xsl +32 -32
  32. package/demo/xhtml-template.xhtml +44 -44
  33. package/demo/z.html +42 -0
  34. package/demo/z.xml +60 -0
  35. package/http-request.js +28 -37
  36. package/index.html +23 -19
  37. package/input-text.js +17 -0
  38. package/local-storage.js +28 -35
  39. package/location-element.js +15 -16
  40. package/package.json +1 -1
  41. package/0/a.html +0 -19
  42. package/0/a.xml +0 -10
  43. package/0/a.xsl +0 -66
  44. package/0/a1.xsl +0 -38
  45. package/0/ab.xsl +0 -23
  46. package/0/az.xml +0 -30
  47. package/0/b.html +0 -90
package/demo/location-element.html CHANGED
@@ -1,5 +1,6 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:html="http://www.w3.org/1999/xhtml">
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
3
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
4
  <head>
4
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
6
  <title>custom-element Declarative Custom Element implementation demo</title>
@@ -24,7 +25,7 @@
24
25
  <html-demo-element legend="Change window URL">
25
26
  <template>
26
27
  <a href="#dce2">#dce2</a>
27
- <form >
28
+ <form method="get">
28
29
  <input name="p1" value="abc"/>
29
30
  <input name="p2" value="def"/>
30
31
  <input type="submit" value="params"/>
@@ -38,7 +39,7 @@
38
39
  </html-demo-element>
39
40
 
40
41
 
41
- <html-demo-element legend="2. window.location live update"
42
+ <html-demo-element legend="1. window.location live update"
42
43
  description="In the page beginning change the window URL via link or by history change"
43
44
  id="dce2"
44
45
  >
@@ -49,24 +50,20 @@
49
50
 
50
51
  <location-element slice="window-url" live></location-element>
51
52
 
52
- <html:table>
53
- <xsl:for-each select="//slice/window-url/@*">
54
- <html:tr>
55
- <html:th><xsl:value-of select="name()"/></html:th>
56
- <html:td><xsl:value-of select="."/></html:td>
57
- </html:tr>
58
- </xsl:for-each>
59
- <html:tr>
60
- <html:th><u>params</u></html:th>
61
- <html:th></html:th>
62
- </html:tr>
63
- <xsl:for-each select="//slice/window-url/params/*">
64
- <html:tr>
65
- <html:th><xsl:value-of select="name()"/></html:th>
66
- <html:td><xsl:value-of select="."/></html:td>
67
- </html:tr>
68
- </xsl:for-each>
69
- </html:table>
53
+ <xhtml:table>
54
+ <tr><th><h3> URL properties </h3></th></tr>
55
+ <xsl:apply-templates mode="attrs" select="//slice/window-url/@*"></xsl:apply-templates>
56
+ </xhtml:table>
57
+ <xhtml:table>
58
+ <tr><th><h3> URL parameters </h3></th></tr>
59
+ <xsl:apply-templates mode="attrs" select="//slice/window-url/params/*"></xsl:apply-templates>
60
+ </xhtml:table>
61
+ <xsl:template mode="attrs" match="*|@*">
62
+ <xhtml:tr>
63
+ <xhtml:th>{name()}</xhtml:th>
64
+ <xhtml:td>{.}</xhtml:td>
65
+ </xhtml:tr>
66
+ </xsl:template>
70
67
  </template>
71
68
  </custom-element>
72
69
  <dce-2>?</dce-2>
@@ -74,7 +71,7 @@
74
71
  </html-demo-element>
75
72
 
76
73
 
77
- <html-demo-element legend="1. window.location simplest"
74
+ <html-demo-element legend="2. window.location simplest"
78
75
  description="location read only during initial and only render, does not track the changes."
79
76
  id="dce1">
80
77
  <p>Has to produce URL properties</p>
@@ -84,24 +81,26 @@
84
81
 
85
82
  <location-element slice="window-url"></location-element>
86
83
 
87
- <html:table>
88
- <xsl:for-each select="//slice/window-url/@*">
89
- <html:tr>
90
- <html:th><xsl:value-of select="name()"/></html:th>
91
- <html:td><xsl:value-of select="."/></html:td>
92
- </html:tr>
93
- </xsl:for-each>
94
- <html:tr>
95
- <html:th><u>params</u></html:th>
96
- <html:th></html:th>
97
- </html:tr>
98
- <xsl:for-each select="//slice/window-url/params/*">
99
- <html:tr>
100
- <html:th><xsl:value-of select="name()"/></html:th>
101
- <html:td><xsl:value-of select="."/></html:td>
102
- </html:tr>
103
- </xsl:for-each>
104
- </html:table>
84
+ <xhtml:table>
85
+ <xhtml:tbody>
86
+ <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
87
+ <xsl:for-each select="//slice/window-url/@*">
88
+ <xhtml:tr>
89
+ <xhtml:th>{name()}</xhtml:th>
90
+ <xhtml:td>{.}</xhtml:td>
91
+ </xhtml:tr>
92
+ </xsl:for-each>
93
+ </xhtml:tbody>
94
+ <xhtml:tbody>
95
+ <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
96
+ <xsl:for-each select="//slice/window-url/params/*">
97
+ <xhtml:tr>
98
+ <xhtml:th>{name()}</xhtml:th>
99
+ <xhtml:td>{.}</xhtml:td>
100
+ </xhtml:tr>
101
+ </xsl:for-each>
102
+ </xhtml:tbody>
103
+ </xhtml:table>
105
104
  </template>
106
105
  </custom-element>
107
106
  <dce-1>?</dce-1>
@@ -119,24 +118,26 @@
119
118
 
120
119
  <location-element slice="src-url" src="https://my.example?a=1&b=2#3"></location-element>
121
120
 
122
- <html:table>
123
- <xsl:for-each select="//slice/src-url/@*">
124
- <html:tr>
125
- <html:th><xsl:value-of select="name()"/></html:th>
126
- <html:td><xsl:value-of select="."/></html:td>
127
- </html:tr>
128
- </xsl:for-each>
129
- <html:tr>
130
- <html:th><u>params</u></html:th>
131
- <html:th></html:th>
132
- </html:tr>
133
- <xsl:for-each select="//slice/src-url/params/*">
134
- <html:tr>
135
- <html:th><xsl:value-of select="name()"/></html:th>
136
- <html:td><xsl:value-of select="."/></html:td>
137
- </html:tr>
138
- </xsl:for-each>
139
- </html:table>
121
+ <xhtml:table>
122
+ <xhtml:tbody>
123
+ <xhtml:tr><xhtml:th><h3>URL properties</h3></xhtml:th></xhtml:tr>
124
+ <xsl:for-each select="//slice/src-url/@*">
125
+ <xhtml:tr>
126
+ <xhtml:th>{name()}</xhtml:th>
127
+ <xhtml:td>{.}</xhtml:td>
128
+ </xhtml:tr>
129
+ </xsl:for-each>
130
+ </xhtml:tbody>
131
+ <xhtml:tbody>
132
+ <xhtml:tr><xhtml:th><h3>URL parameters</h3></xhtml:th></xhtml:tr>
133
+ <xsl:for-each select="//slice/src-url/params/*">
134
+ <xhtml:tr>
135
+ <xhtml:th>{name()}</xhtml:th>
136
+ <xhtml:td>{.}</xhtml:td>
137
+ </xhtml:tr>
138
+ </xsl:for-each>
139
+ </xhtml:tbody>
140
+ </xhtml:table>
140
141
  </template>
141
142
  </custom-element>
142
143
  <dce-3>?</dce-3>
package/demo/s.xml ADDED
@@ -0,0 +1 @@
1
+ <datadom><payload><i xmlns="http://www.w3.org/1999/xhtml" slot="">loading from HTML file ...</i></payload><attributes><src>/src/demo/html-template.html</src><tag/><data-smile>👼</data-smile><attr-1>a1</attr-1><attr-2>a2</attr-2></attributes><dataset><smile>👼</smile></dataset><slice/></datadom>
package/demo/s.xslt ADDED
@@ -0,0 +1,159 @@
1
+ <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dce="urn:schemas-epa-wg:dce"
2
+ xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
3
+ <xsl:template mode="payload" match="attributes">
4
+ <dce-root xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
5
+ <head data-dce-id="2">
6
+
7
+ <title data-dce-id="4">template based on HTML file</title>
8
+ </head>
9
+ <body data-dce-id="5">
10
+ <b id="wave" data-dce-id="6">👋</b>
11
+ <b id="ok" data-dce-id="7">👌</b>
12
+ <svg xmlns="http://www.w3.org/2000/svg" id="dwc-logo" viewBox="0 0 216 209.18" data-dce-id="8">
13
+ <defs data-dce-id="9">
14
+ <style data-dce-id="10">
15
+ .cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}
16
+ </style>
17
+ </defs>
18
+ <polygon class="cls-3"
19
+ 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"
20
+ data-dce-id="11"/>
21
+ <path class="cls-2"
22
+ 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"
23
+ data-dce-id="12"/>
24
+ <path class="cls-2"
25
+ 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"
26
+ data-dce-id="13"/>
27
+ <path class="cls-1"
28
+ 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"
29
+ data-dce-id="14"/>
30
+ <path class="cls-2"
31
+ 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"
32
+ data-dce-id="15"/>
33
+ <path class="cls-2"
34
+ 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"
35
+ data-dce-id="16"/>
36
+ <path class="cls-2"
37
+ 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"
38
+ data-dce-id="17"/>
39
+ <path class="cls-2"
40
+ 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"
41
+ data-dce-id="18"/>
42
+ <path class="cls-4"
43
+ 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"
44
+ data-dce-id="19"/>
45
+ <path class="cls-4"
46
+ 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"
47
+ data-dce-id="20"/>
48
+ <path class="cls-4"
49
+ 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"
50
+ data-dce-id="21"/>
51
+ <path class="cls-4"
52
+ 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"
53
+ data-dce-id="22"/>
54
+ <path class="cls-4"
55
+ 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"
56
+ data-dce-id="23"/>
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
+ data-dce-id="24"/>
60
+ <path class="cls-4"
61
+ 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"
62
+ data-dce-id="25"/>
63
+ <path class="cls-4"
64
+ 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"
65
+ data-dce-id="26"/>
66
+ <path class="cls-2"
67
+ 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"
68
+ data-dce-id="27"/>
69
+ <path class="cls-1"
70
+ 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"
71
+ data-dce-id="28"/>
72
+ <path class="cls-1"
73
+ 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"
74
+ data-dce-id="29"/>
75
+ <path class="cls-2"
76
+ 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"
77
+ data-dce-id="30"/>
78
+ <path class="cls-1"
79
+ 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"
80
+ data-dce-id="31"/>
81
+ <path class="cls-1"
82
+ 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"
83
+ data-dce-id="32"/>
84
+ </svg>
85
+ <math xmlns="http://www.w3.org/1998/Math/MathML" id="sophomores-dream" display="block" data-dce-id="33">
86
+ <mrow data-dce-id="34">
87
+ <msubsup data-dce-id="35">
88
+ <mo data-dce-id="36">∫</mo>
89
+ <mn data-dce-id="37">0</mn>
90
+ <mn data-dce-id="38">1</mn>
91
+ </msubsup>
92
+ <msup data-dce-id="39">
93
+ <mi data-dce-id="40">x</mi>
94
+ <mi data-dce-id="41">x</mi>
95
+ </msup>
96
+ <mo rspace="0.22em" data-dce-id="42">⁢</mo>
97
+ <mo rspace="0" data-dce-id="43">ⅆ</mo>
98
+ <mi data-dce-id="44">x</mi>
99
+ <mo data-dce-id="45">=</mo>
100
+ <munderover data-dce-id="46">
101
+ <mo data-dce-id="47">∑</mo>
102
+ <mrow data-dce-id="48">
103
+ <mi data-dce-id="49">n</mi>
104
+ <mo data-dce-id="50">=</mo>
105
+ <mn data-dce-id="51">1</mn>
106
+ </mrow>
107
+ <mn data-dce-id="52">∞</mn>
108
+ </munderover>
109
+ <msup data-dce-id="53">
110
+ <mrow data-dce-id="54">
111
+ <mo data-dce-id="55">(</mo>
112
+ <mrow data-dce-id="56">
113
+ <mo form="prefix" data-dce-id="57">−</mo>
114
+ <mn data-dce-id="58">1</mn>
115
+ </mrow>
116
+ <mo data-dce-id="59">)</mo>
117
+ </mrow>
118
+ <mrow data-dce-id="60">
119
+ <mi data-dce-id="61">n</mi>
120
+ <mo data-dce-id="62">+</mo>
121
+ <mn data-dce-id="63">1</mn>
122
+ </mrow>
123
+ </msup>
124
+ <mo data-dce-id="64">⁢</mo>
125
+ <msup data-dce-id="65">
126
+ <mi data-dce-id="66">n</mi>
127
+ <mrow data-dce-id="67">
128
+ <mo form="prefix" data-dce-id="68">−</mo>
129
+ <mi data-dce-id="69">n</mi>
130
+ </mrow>
131
+ </msup>
132
+ </mrow>
133
+ </math>
134
+ <script type="module" src="/__web-dev-server__web-socket.js?wds-import-map=0" data-dce-id="70"/>
135
+ </body>
136
+ </dce-root>
137
+ </xsl:template>
138
+ <xsl:template match="/">
139
+ <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
140
+ </xsl:template>
141
+ <xsl:template name="slot">
142
+ <xsl:param name="slotname"/>
143
+ <xsl:param name="defaultvalue"/>
144
+ <xsl:choose>
145
+ <xsl:when test="//payload/*[@slot=$slotname]">
146
+ <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
147
+ </xsl:when>
148
+ <xsl:otherwise>
149
+ <xsl:copy-of select="$defaultvalue"/>
150
+ </xsl:otherwise>
151
+ </xsl:choose>
152
+ </xsl:template>
153
+ <xsl:variable name="js-injected-body">
154
+ <xsl:call-template name="slot">
155
+ <xsl:with-param name="slotname" select="''"/>
156
+ <xsl:with-param name="defaultvalue"/>
157
+ </xsl:call-template>
158
+ </xsl:variable>
159
+ </xsl:stylesheet>
package/demo/scoped-css.html ADDED
@@ -0,0 +1,170 @@
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="../input-text.js"></script>
10
+ <script type="module" src="../custom-element.js"></script>
11
+ <style>
12
+ @import "./demo.css";
13
+
14
+ button {
15
+ display: inline-flex;
16
+ flex-direction: column;
17
+ align-items: center;
18
+ flex: auto;
19
+ box-shadow: inset silver 0 0 1rem;
20
+ min-width: 12rem;
21
+ padding: 1rem;
22
+ color: coral;
23
+ text-shadow: 1px 1px silver;
24
+ font-weight: bolder;
25
+ }
26
+
27
+ caption {
28
+ padding: 1rem;
29
+ font-weight: bolder;
30
+ font-family: sans-serif;
31
+ }
32
+
33
+ code {
34
+ text-align: right;
35
+ min-width: 3rem;
36
+ }
37
+
38
+ </style>
39
+ </head>
40
+ <body>
41
+
42
+ <nav>
43
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
44
+ <h3>DOM merge. DCE dynamic update with focus preservation.</h3>
45
+ </nav>
46
+
47
+ <html-demo-element legend="1. STYLE tag css rules are scoped within element "
48
+ description="Green button borders should not be applied to external button ">
49
+ <template>
50
+ <custom-element>
51
+ <template><!-- template needed to avoid styles leaking into global HTML -->
52
+ <style>
53
+ button{ border: 0.2rem dashed green; }
54
+ </style>
55
+ <button>Green dashed border</button>
56
+ </template>
57
+ </custom-element>
58
+ <button>Default border</button>
59
+ </template>
60
+ </html-demo-element>
61
+
62
+ <html-demo-element legend="2. DCE with tag "
63
+ description="Blue borders only within 2 DCE instances">
64
+ <template>
65
+ <custom-element tag="dce-1">
66
+ <template><!-- template needed to avoid styles leaking into global HTML -->
67
+ <style>
68
+ button{ border: 0.2rem dotted blue; }
69
+ </style>
70
+ <button><slot>Blue borders</slot></button>
71
+ </template>
72
+ </custom-element>
73
+ <button>Default border</button>
74
+ <dce-1>1st</dce-1>
75
+ <dce-1>2nd</dce-1>
76
+ </template>
77
+ </html-demo-element>
78
+
79
+ <html-demo-element legend="3. Override style in DCE payload "
80
+ description="Red borders only for last DCE instance">
81
+ <template>
82
+ <custom-element tag="dce-2">
83
+ <template><!-- template needed to avoid styles leaking into global HTML -->
84
+ <style>
85
+ button{ border: 0.2rem dashed blue; }
86
+ </style>
87
+ <button><slot>Blue borders</slot></button>
88
+ </template>
89
+ </custom-element>
90
+ <button>Default border</button>
91
+ <dce-2>1st</dce-2>
92
+ <dce-2>
93
+ <template> <!-- template needed to avoid styles leaking into global HTML -->
94
+ <style>button{border-color:red;}</style>
95
+ Red border
96
+ <b>2</b>
97
+ 3
98
+ <b>4</b>
99
+ </template>
100
+ </dce-2>
101
+ </template>
102
+ </html-demo-element>
103
+
104
+
105
+ <html-demo-element legend="4. simple internal override "
106
+ description="green label with blue text button ">
107
+ <template>
108
+ <custom-element>
109
+ <template>
110
+ <style>
111
+ color:green;
112
+ b{ color: blue;}
113
+ input:checked+b{ color: darkblue; text-shadow: 0 0 4px springgreen;}
114
+ </style>
115
+ <label>
116
+ green
117
+ <input type="checkbox" value="Glowing Blue" checked/><b>blue</b>
118
+ </label>
119
+ </template>
120
+ </custom-element>
121
+
122
+ </template>
123
+ </html-demo-element>
124
+
125
+
126
+ <html-demo-element legend="5. External template( inline lib )"
127
+ description="green label with blue text button ">
128
+ <template>
129
+ <template id="template-5">
130
+ <style>
131
+ color:green;
132
+ i{ color: blue;}
133
+ </style>
134
+ <p>
135
+ green
136
+ <i>blue</i>
137
+ </p>
138
+ </template>
139
+ <custom-element src="#template-5"></custom-element>
140
+
141
+ </template>
142
+ </html-demo-element>
143
+
144
+ <html-demo-element legend="6. External template( ext lib )"
145
+ description="Grid with 8 hex shaped buttons with text and icon ">
146
+ <template>
147
+ <a href="hex-grid-dce.html">hex-grid-dce.html</a>
148
+ <custom-element src="hex-grid-dce.html#hex-grid-template">
149
+ <template>
150
+ <style>nav{--hex-grid-size: 5rem; margin-left:2rem; }</style>
151
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
152
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
153
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
154
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
155
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
156
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
157
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
158
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
159
+ </template>
160
+ </custom-element>
161
+
162
+ </template>
163
+ </html-demo-element>
164
+
165
+
166
+
167
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
168
+
169
+ </body>
170
+ </html>
package/demo/ss.html ADDED
@@ -0,0 +1,32 @@
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="../input-text.js"></script>
10
+ <script type="module" src="../custom-element.js"></script>
11
+ <style>
12
+ @import "./demo.css";
13
+ </style>
14
+ </head>
15
+ <body>
16
+
17
+
18
+ <custom-element src="hex-grid-dce.html#hex-grid-template">
19
+ <template>
20
+ <style>nav{--hex-grid-size: 4rem;}</style>
21
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
22
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
23
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
24
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
25
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
26
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
27
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
28
+ </template>
29
+ </custom-element>
30
+
31
+ </body>
32
+ </html>
package/demo/table.xml CHANGED
@@ -1,25 +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>
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
25
  </div>