@epa-wg/custom-element 0.0.13 → 0.0.14
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.
- package/README.md +3 -3
- package/custom-element.js +13 -6
- package/demo/local-storage.html +4 -3
- package/demo/s.xml +1 -1
- package/demo/s.xslt +24 -135
- package/demo/z.html +60 -42
- package/local-storage.js +5 -14
- package/location-element.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -270,9 +270,9 @@ within template
|
|
|
270
270
|
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
|
|
271
271
|
[npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
|
|
272
272
|
[npm-url]: https://npmjs.org/package/@epa-wg/custom-element
|
|
273
|
-
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
274
|
-
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
275
|
-
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
273
|
+
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.14/coverage/coverage.svg
|
|
274
|
+
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.14/coverage/lcov-report/index.html
|
|
275
|
+
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.14/storybook-static/index.html?path=/story/welcome--introduction
|
|
276
276
|
[sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
|
|
277
277
|
[webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
|
|
278
278
|
[webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
|
package/custom-element.js
CHANGED
|
@@ -19,12 +19,12 @@ ASSERT(x)
|
|
|
19
19
|
// if(!x)
|
|
20
20
|
// debugger
|
|
21
21
|
}
|
|
22
|
-
function
|
|
22
|
+
export function
|
|
23
23
|
xml2dom( xmlString )
|
|
24
24
|
{
|
|
25
25
|
return new DOMParser().parseFromString( xmlString, "application/xml" )
|
|
26
26
|
}
|
|
27
|
-
function
|
|
27
|
+
export function
|
|
28
28
|
xmlString(doc){ return new XMLSerializer().serializeToString( doc ) }
|
|
29
29
|
|
|
30
30
|
function
|
|
@@ -95,7 +95,7 @@ tagUid( node )
|
|
|
95
95
|
[...m].forEach(t=>
|
|
96
96
|
{ if( t.index > l )
|
|
97
97
|
tt.push( txt( t.input.substring( l, t.index ) ))
|
|
98
|
-
const v =
|
|
98
|
+
const v = node.querySelector('value-of').cloneNode();
|
|
99
99
|
v.setAttribute('select', t[1] );
|
|
100
100
|
tt.push(v);
|
|
101
101
|
l = t.index+t[0].length;
|
|
@@ -124,7 +124,7 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
|
|
|
124
124
|
return tagUid(templateNode)
|
|
125
125
|
const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >
|
|
126
126
|
<xsl:output method="xml" />
|
|
127
|
-
<xsl:template match="/"><dce-root><xsl:apply-templates select="*"/></dce-root></xsl:template>
|
|
127
|
+
<xsl:template match="/"><dce-root xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*"/></dce-root></xsl:template>
|
|
128
128
|
<xsl:template match="*[name()='template']"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
|
|
129
129
|
<xsl:template match="*"><xsl:apply-templates mode="sanitize" select="*|text()"/></xsl:template>
|
|
130
130
|
<xsl:template match="*[name()='svg']|*[name()='math']"><xsl:apply-templates mode="sanitize" select="."/></xsl:template>
|
|
@@ -141,7 +141,12 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
|
|
|
141
141
|
{
|
|
142
142
|
forEach$(n,'script', s=> s.remove() );
|
|
143
143
|
const e = n.firstElementChild?.content || n.content
|
|
144
|
-
, asXmlNode = r =>
|
|
144
|
+
, asXmlNode = r => {
|
|
145
|
+
const d = xml2dom( '<xhtml/>' )
|
|
146
|
+
, n = d.importNode(r, true);
|
|
147
|
+
d.replaceChild(n,d.documentElement);
|
|
148
|
+
return xslHtmlNs(n);
|
|
149
|
+
};
|
|
145
150
|
if( e )
|
|
146
151
|
{ const t = create('div');
|
|
147
152
|
[ ...e.childNodes ].map( c => t.append(c.cloneNode(true)) )
|
|
@@ -152,10 +157,12 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
|
|
|
152
157
|
, xslDom = xml2dom(
|
|
153
158
|
`<xsl:stylesheet version="1.0"
|
|
154
159
|
xmlns:xsl="${ XSL_NS_URL }"
|
|
160
|
+
xmlns:xhtml="${ HTML_NS_URL }"
|
|
155
161
|
xmlns:dce="urn:schemas-epa-wg:dce"
|
|
156
162
|
xmlns:exsl="http://exslt.org/common"
|
|
157
163
|
exclude-result-prefixes="exsl"
|
|
158
164
|
>
|
|
165
|
+
<xsl:template match="ignore"><xsl:value-of select="."/></xsl:template>
|
|
159
166
|
<xsl:template mode="payload" match="attributes"></xsl:template>
|
|
160
167
|
<xsl:template match="/">
|
|
161
168
|
<xsl:apply-templates mode="payload" select="/datadom/attributes"/>
|
|
@@ -436,7 +443,7 @@ CustomElement extends HTMLElement
|
|
|
436
443
|
const transform = ()=>
|
|
437
444
|
{
|
|
438
445
|
const ff = xp.map( (p,i) =>
|
|
439
|
-
{ const f = p.transformToFragment(x, document)
|
|
446
|
+
{ const f = p.transformToFragment(x.ownerDocument, document)
|
|
440
447
|
if( !f )
|
|
441
448
|
console.error( "XSLT transformation error. xsl:\n", xmlString(templateDocs[i]), '\nxml:\n', xmlString(x) );
|
|
442
449
|
return f
|
package/demo/local-storage.html
CHANGED
|
@@ -82,18 +82,19 @@
|
|
|
82
82
|
</table>
|
|
83
83
|
</fieldset>
|
|
84
84
|
<script type="module">
|
|
85
|
+
import { localStorageSetItem } from '../local-storage.js';
|
|
85
86
|
import $ from 'https://unpkg.com/css-chain@1/CssChain.js';
|
|
86
87
|
|
|
87
88
|
const basket = {cherries: 12, lemons:1 };
|
|
88
|
-
|
|
89
|
+
localStorageSetItem( 'basket', JSON.stringify(basket) );
|
|
89
90
|
|
|
90
91
|
$('button[name]')
|
|
91
92
|
.forEach( b=> localStorage.setItem( b.name, b.value ) )
|
|
92
93
|
.addEventListener( 'click', e =>
|
|
93
94
|
{ const k = e.target.name;
|
|
94
95
|
basket[k] || (basket[k] = 1);
|
|
95
|
-
|
|
96
|
-
|
|
96
|
+
localStorageSetItem( k, basket[k] = 1+1*localStorage[k] )
|
|
97
|
+
localStorageSetItem( 'basket', JSON.stringify(basket) );
|
|
97
98
|
renderStorage();
|
|
98
99
|
} );
|
|
99
100
|
|
package/demo/s.xml
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<datadom><payload><i xmlns="http://www.w3.org/1999/xhtml" slot=""
|
|
1
|
+
<datadom><payload><i xmlns="http://www.w3.org/1999/xhtml" slot="">🍋</i></payload><attributes/><dataset/><slice/></datadom>
|
package/demo/s.xslt
CHANGED
|
@@ -1,139 +1,28 @@
|
|
|
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"
|
|
1
|
+
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dce="urn:schemas-epa-wg:dce"
|
|
2
|
+
xmlns:exsl="http://exslt.org/common" exclude-result-prefixes="exsl">
|
|
3
|
+
<xsl:template match="ignore">
|
|
4
|
+
<xsl:value-of select="."/>
|
|
5
|
+
</xsl:template>
|
|
3
6
|
<xsl:template mode="payload" match="attributes">
|
|
4
|
-
<
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
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>
|
|
7
|
+
<nav data-dce-id="1">
|
|
8
|
+
<xsl:for-each select="/datadom/payload/xhtml:*">
|
|
9
|
+
<xsl:if test="local-name(.) = 'style'">
|
|
10
|
+
<xsl:copy-of select=".">
|
|
11
|
+
</xsl:copy-of>
|
|
12
|
+
</xsl:if>
|
|
13
|
+
<xsl:if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
|
|
14
|
+
<section data-dce-id="2">
|
|
15
|
+
<button class="action" data-dce-id="3">
|
|
16
|
+
<dce-text data-dce-id="4">
|
|
17
|
+
<xsl:value-of select="@alt"/>
|
|
18
|
+
</dce-text>
|
|
19
|
+
<xsl:copy-of select=".">
|
|
20
|
+
</xsl:copy-of>
|
|
21
|
+
</button>
|
|
22
|
+
</section>
|
|
23
|
+
</xsl:if>
|
|
24
|
+
</xsl:for-each>
|
|
25
|
+
</nav>
|
|
137
26
|
</xsl:template>
|
|
138
27
|
<xsl:template match="/">
|
|
139
28
|
<xsl:apply-templates mode="payload" select="/datadom/attributes"/>
|
package/demo/z.html
CHANGED
|
@@ -1,42 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
+
<custom-element src="hex-grid-dce.html#hex-grid-template">
|
|
42
|
+
<template>
|
|
43
|
+
<style>nav{--hex-grid-size: 5rem; margin-left:2rem; }</style>
|
|
44
|
+
<img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
|
|
45
|
+
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
|
|
46
|
+
<img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
|
|
47
|
+
<img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
|
|
48
|
+
<img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
|
|
49
|
+
<img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
|
|
50
|
+
<img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
|
|
51
|
+
<img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
|
|
52
|
+
</template>
|
|
53
|
+
</custom-element>
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
</body>
|
|
60
|
+
</html>
|
package/local-storage.js
CHANGED
|
@@ -9,22 +9,14 @@ const string2value = (type, v) =>
|
|
|
9
9
|
return type==='number'? el.valueAsNumber : 'date|time|dateTimeLocal'.includes(type)? el.valueAsDate: el.value;
|
|
10
10
|
};
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{ if( originalSetItem )
|
|
16
|
-
return;
|
|
17
|
-
originalSetItem = localStorage.setItem;
|
|
18
|
-
localStorage.setItem = function( key, value, ...rest )
|
|
19
|
-
{ originalSetItem.apply(this, [ key, value, ...rest ]);
|
|
20
|
-
window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
|
|
21
|
-
};
|
|
12
|
+
export function localStorageSetItem(key, value)
|
|
13
|
+
{ localStorage.setItem(key, value);
|
|
14
|
+
window.dispatchEvent( new CustomEvent('local-storage',{detail:{key,value}}) );
|
|
22
15
|
}
|
|
23
|
-
|
|
24
16
|
export class LocalStorageElement extends HTMLElement
|
|
25
17
|
{
|
|
26
18
|
static get observedAttributes() {
|
|
27
|
-
return [ 'value' // populated from localStorage, if defined initially, sets the
|
|
19
|
+
return [ 'value' // populated from localStorage, if defined initially, sets the value in storage
|
|
28
20
|
, 'slice'
|
|
29
21
|
, 'key'
|
|
30
22
|
, 'type' // `text|json`, defaults to text, other types are compatible with INPUT field
|
|
@@ -41,14 +33,13 @@ export class LocalStorageElement extends HTMLElement
|
|
|
41
33
|
}
|
|
42
34
|
// todo apply type
|
|
43
35
|
if( this.hasAttribute('value'))
|
|
44
|
-
|
|
36
|
+
localStorageSetItem( attr( this, 'key' ) )
|
|
45
37
|
else
|
|
46
38
|
fromStorage()
|
|
47
39
|
|
|
48
40
|
if( this.hasAttribute('live') )
|
|
49
41
|
{ const listener = (e => e.detail.key === attr( 'key' ) && fromStorage());
|
|
50
42
|
window.addEventListener( 'local-storage', listener );
|
|
51
|
-
ensureTrackLocalStorage();
|
|
52
43
|
this._destroy = ()=> window.removeEventListener('local-storage', listener );
|
|
53
44
|
}
|
|
54
45
|
}
|
package/location-element.js
CHANGED
|
@@ -3,7 +3,7 @@ const attr = (el, attr)=> el.getAttribute(attr);
|
|
|
3
3
|
export class LocationElement extends HTMLElement
|
|
4
4
|
{
|
|
5
5
|
static get observedAttributes()
|
|
6
|
-
{ return [ 'value' // populated from localStorage, if defined initially, sets the
|
|
6
|
+
{ return [ 'value' // populated from localStorage, if defined initially, sets the value in storage
|
|
7
7
|
, 'slice'
|
|
8
8
|
, 'live' // monitors location change
|
|
9
9
|
, 'src' // URL to be parsed, defaults to `window.location`
|
package/package.json
CHANGED