@epa-wg/custom-element 0.0.9 → 0.0.11
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/.gitignore +6 -2
- package/.idea/inspectionProfiles/Project_Default.xml +26 -0
- package/0/a.html +19 -0
- package/0/a.xml +10 -0
- package/0/a.xsl +66 -0
- package/0/a1.xsl +38 -0
- package/0/ab.xsl +23 -0
- package/0/az.xml +30 -0
- package/0/b.html +90 -0
- package/README.md +33 -5
- package/custom-element.js +184 -70
- package/demo/a.html +24 -0
- package/demo/confused.svg +37 -0
- package/demo/demo.css +3 -1
- package/demo/embed-1.html +3 -0
- package/demo/external-template.html +176 -0
- package/demo/html-template.html +13 -0
- package/demo/html-template.xhtml +45 -0
- package/demo/html-template.xml +45 -0
- package/demo/http-request.html +3 -0
- package/demo/local-storage.html +3 -0
- package/demo/location-element.html +149 -0
- package/demo/logo.png +0 -0
- package/demo/table.xml +25 -0
- package/demo/table.xsl +293 -0
- package/demo/template.xsl +46 -0
- package/demo/tree.xml +25 -0
- package/demo/tree.xsl +33 -0
- package/demo/wc-square.svg +1 -1
- package/demo/xhtml-template.xhtml +45 -0
- package/http-request.js +4 -2
- package/index.html +29 -22
- package/location-element.js +63 -0
- package/package.json +1 -1
package/demo/wc-square.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8"?><svg
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><svg 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>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" 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/http-request.js
CHANGED
|
@@ -47,8 +47,10 @@ export class HttpRequestElement extends HTMLElement
|
|
|
47
47
|
|
|
48
48
|
slice.detail.response = r;
|
|
49
49
|
updateSlice( slice );
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
const detail = {...slice.detail}
|
|
51
|
+
detail.data = await response.json();
|
|
52
|
+
const s = {...slice, detail}
|
|
53
|
+
updateSlice( s );
|
|
52
54
|
},0 );
|
|
53
55
|
|
|
54
56
|
return s;
|
package/index.html
CHANGED
|
@@ -26,8 +26,10 @@
|
|
|
26
26
|
<p>Try in <a href="https://stackblitz.com/github/EPA-WG/custom-element?file=index.html" >Sandbox</a> </p>
|
|
27
27
|
<section>
|
|
28
28
|
<b>Data layer demo</b>
|
|
29
|
-
<a href="./demo/local-storage.html">local-storage</a> |
|
|
30
|
-
<a href="./demo/http-request.html">http-request</a>
|
|
29
|
+
<a href="./demo/local-storage.html" >local-storage </a> |
|
|
30
|
+
<a href="./demo/http-request.html" >http-request </a> |
|
|
31
|
+
<a href="./demo/location-element.html" >location-element </a> |
|
|
32
|
+
<a href="./demo/external-template.html" >external template </a>
|
|
31
33
|
</section>
|
|
32
34
|
</nav>
|
|
33
35
|
<html-demo-element legend="1. simple payload"
|
|
@@ -44,20 +46,22 @@
|
|
|
44
46
|
description="slots are filled as in template+shadow root">
|
|
45
47
|
<template>
|
|
46
48
|
<custom-element tag="dce-1-slot" hidden>
|
|
47
|
-
|
|
49
|
+
🐇❤️<slot name="slot1"> 🥦</slot>
|
|
48
50
|
</custom-element>
|
|
49
51
|
<dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
|
|
50
52
|
</template>
|
|
51
53
|
</html-demo-element>
|
|
52
54
|
|
|
53
55
|
<html-demo-element legend="2a. payload with slot definition and slot value"
|
|
54
|
-
description="same slot can be used multiple times
|
|
56
|
+
description="unlike in TEMPLATE, same slot can be used multiple times and within attribute ">
|
|
55
57
|
<template>
|
|
56
58
|
<custom-element tag="dce-2-slots" hidden>
|
|
57
59
|
<slot name="slot2"> 😃</slot> and again:
|
|
58
60
|
<slot name="slot2"> 😃</slot>
|
|
61
|
+
<input placeholder="🐇❤️{//*[@slot='slot2']}"/>
|
|
59
62
|
</custom-element>
|
|
60
63
|
<dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
|
|
64
|
+
<dce-2-slots></dce-2-slots>
|
|
61
65
|
</template>
|
|
62
66
|
</html-demo-element>
|
|
63
67
|
|
|
@@ -93,6 +97,7 @@
|
|
|
93
97
|
<custom-element tag="greet-element" hidden>
|
|
94
98
|
<slot> Hello </slot> World!
|
|
95
99
|
</custom-element>
|
|
100
|
+
<greet-element></greet-element>
|
|
96
101
|
<greet-element>👋</greet-element>
|
|
97
102
|
</template>
|
|
98
103
|
</html-demo-element>
|
|
@@ -101,25 +106,26 @@
|
|
|
101
106
|
description="Complex case with slots, attributes, dataset, conditional render">
|
|
102
107
|
<template>
|
|
103
108
|
|
|
104
|
-
<custom-element tag="pokemon-tile" hidden>
|
|
105
|
-
<
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
109
|
+
<custom-element tag="pokemon-tile" hidden id="shared-template">
|
|
110
|
+
<template>
|
|
111
|
+
<h3><xsl:value-of select="title"/></h3> <!-- title is an attribute in instance
|
|
112
|
+
mapped into /*/attributes/title -->
|
|
113
|
+
<xsl:if test="//smile"> <!-- data-smile DCE instance attribute,
|
|
114
|
+
mapped into /*/dataset/smile
|
|
115
|
+
used in condition -->
|
|
116
|
+
<!-- data-smile DCE instance attribute, used as HTML -->
|
|
117
|
+
<div>Smile as: <xsl:value-of select='//smile'/></div>
|
|
118
|
+
</xsl:if>
|
|
119
|
+
<!-- image would not be visible in sandbox, see live demo -->
|
|
120
|
+
<img src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
|
|
121
|
+
alt="{title} image"/>
|
|
122
|
+
<!-- image-src and title are DCE instance attributes,
|
|
123
|
+
mapped into /*/attributes/
|
|
124
|
+
used within output attribute via curly brackets -->
|
|
119
125
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
126
|
+
<!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
|
|
127
|
+
<p><slot name="description"><i>description is not available</i></slot></p>
|
|
128
|
+
<xsl:for-each select="//*[@pokemon-id]">
|
|
123
129
|
<!-- loop over payload elements with `pokemon-id` attribute -->
|
|
124
130
|
<button>
|
|
125
131
|
<img height="32"
|
|
@@ -130,6 +136,7 @@
|
|
|
130
136
|
</button>
|
|
131
137
|
|
|
132
138
|
</xsl:for-each>
|
|
139
|
+
</template>
|
|
133
140
|
</custom-element>
|
|
134
141
|
|
|
135
142
|
<pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const attr = (el, attr)=> el.getAttribute(attr);
|
|
2
|
+
|
|
3
|
+
export class LocationElement extends HTMLElement
|
|
4
|
+
{
|
|
5
|
+
// @attribute live - monitors localStorage change
|
|
6
|
+
// @attribute src - URL to be parsed, defaults to `window.location`
|
|
7
|
+
|
|
8
|
+
constructor()
|
|
9
|
+
{
|
|
10
|
+
super();
|
|
11
|
+
const state = {}
|
|
12
|
+
, listener = e=> propagateSlice(e)
|
|
13
|
+
, propagateSlice = (e)=>
|
|
14
|
+
{ const urlStr = attr(this,'src')
|
|
15
|
+
const url = urlStr? new URL(urlStr) : window.location
|
|
16
|
+
|
|
17
|
+
const params= {}
|
|
18
|
+
const search = new URLSearchParams(url.search);
|
|
19
|
+
for (const key of search.keys())
|
|
20
|
+
params[key] = search.getAll(key)
|
|
21
|
+
|
|
22
|
+
const detail = {params}
|
|
23
|
+
for( const k in url )
|
|
24
|
+
{ if ('string' === typeof url[k])
|
|
25
|
+
detail[k] = url[k]
|
|
26
|
+
}
|
|
27
|
+
for( let parent = this.parentElement; parent; parent = parent.parentElement)
|
|
28
|
+
{ if (parent.onSlice)
|
|
29
|
+
return parent.onSlice(
|
|
30
|
+
{ detail
|
|
31
|
+
, target: this
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
console.error(`${this.localName} used outside of custom-element`)
|
|
35
|
+
debugger;
|
|
36
|
+
};
|
|
37
|
+
this.sliceInit = s =>
|
|
38
|
+
{
|
|
39
|
+
if( !state.listener && this.hasAttribute('live') )
|
|
40
|
+
{ state.listener = 1;
|
|
41
|
+
window.addEventListener( 'popstate', listener );
|
|
42
|
+
window.addEventListener( 'hashchange', listener );
|
|
43
|
+
}
|
|
44
|
+
propagateSlice();
|
|
45
|
+
return s || {}
|
|
46
|
+
}
|
|
47
|
+
this._destroy = ()=>
|
|
48
|
+
{
|
|
49
|
+
if( !state.listener )
|
|
50
|
+
return;
|
|
51
|
+
if(state.listener)
|
|
52
|
+
{ window.removeEventListener('popstate', listener);
|
|
53
|
+
window.removeEventListener('hashchange', listener);
|
|
54
|
+
}
|
|
55
|
+
delete state.listener;
|
|
56
|
+
};
|
|
57
|
+
this.sliceInit()
|
|
58
|
+
}
|
|
59
|
+
disconnectedCallback(){ this._destroy(); }
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
window.customElements.define( 'location-element', LocationElement );
|
|
63
|
+
export default LocationElement;
|
package/package.json
CHANGED