@epa-wg/custom-element 0.0.10 → 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 +30 -3
- package/custom-element.js +178 -65
- 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 +1 -1
- package/demo/local-storage.html +1 -1
- package/demo/location-element.html +1 -1
- 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 -23
- package/package.json +1 -1
package/index.html
CHANGED
|
@@ -26,9 +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> |
|
|
31
|
-
<a href="./demo/location-element.html">location-element</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>
|
|
32
33
|
</section>
|
|
33
34
|
</nav>
|
|
34
35
|
<html-demo-element legend="1. simple payload"
|
|
@@ -45,20 +46,22 @@
|
|
|
45
46
|
description="slots are filled as in template+shadow root">
|
|
46
47
|
<template>
|
|
47
48
|
<custom-element tag="dce-1-slot" hidden>
|
|
48
|
-
|
|
49
|
+
🐇❤️<slot name="slot1"> 🥦</slot>
|
|
49
50
|
</custom-element>
|
|
50
51
|
<dce-1-slot><i slot="slot1">🥕</i></dce-1-slot>
|
|
51
52
|
</template>
|
|
52
53
|
</html-demo-element>
|
|
53
54
|
|
|
54
55
|
<html-demo-element legend="2a. payload with slot definition and slot value"
|
|
55
|
-
description="same slot can be used multiple times
|
|
56
|
+
description="unlike in TEMPLATE, same slot can be used multiple times and within attribute ">
|
|
56
57
|
<template>
|
|
57
58
|
<custom-element tag="dce-2-slots" hidden>
|
|
58
59
|
<slot name="slot2"> 😃</slot> and again:
|
|
59
60
|
<slot name="slot2"> 😃</slot>
|
|
61
|
+
<input placeholder="🐇❤️{//*[@slot='slot2']}"/>
|
|
60
62
|
</custom-element>
|
|
61
63
|
<dce-2-slots><i slot="slot2">🥕</i></dce-2-slots>
|
|
64
|
+
<dce-2-slots></dce-2-slots>
|
|
62
65
|
</template>
|
|
63
66
|
</html-demo-element>
|
|
64
67
|
|
|
@@ -94,6 +97,7 @@
|
|
|
94
97
|
<custom-element tag="greet-element" hidden>
|
|
95
98
|
<slot> Hello </slot> World!
|
|
96
99
|
</custom-element>
|
|
100
|
+
<greet-element></greet-element>
|
|
97
101
|
<greet-element>👋</greet-element>
|
|
98
102
|
</template>
|
|
99
103
|
</html-demo-element>
|
|
@@ -102,25 +106,26 @@
|
|
|
102
106
|
description="Complex case with slots, attributes, dataset, conditional render">
|
|
103
107
|
<template>
|
|
104
108
|
|
|
105
|
-
<custom-element tag="pokemon-tile" hidden>
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
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 -->
|
|
120
125
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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]">
|
|
124
129
|
<!-- loop over payload elements with `pokemon-id` attribute -->
|
|
125
130
|
<button>
|
|
126
131
|
<img height="32"
|
|
@@ -131,6 +136,7 @@
|
|
|
131
136
|
</button>
|
|
132
137
|
|
|
133
138
|
</xsl:for-each>
|
|
139
|
+
</template>
|
|
134
140
|
</custom-element>
|
|
135
141
|
|
|
136
142
|
<pokemon-tile title="bulbasaur" data-smile="👼" pokemon-id="1" >
|
package/package.json
CHANGED