@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/.gitignore
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<component name="InspectionProjectProfileManager">
|
|
2
|
+
<profile version="1.0">
|
|
3
|
+
<option name="myName" value="Project Default" />
|
|
4
|
+
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
|
|
5
|
+
<option name="myValues">
|
|
6
|
+
<value>
|
|
7
|
+
<list size="12">
|
|
8
|
+
<item index="0" class="java.lang.String" itemvalue="nobr" />
|
|
9
|
+
<item index="1" class="java.lang.String" itemvalue="noembed" />
|
|
10
|
+
<item index="2" class="java.lang.String" itemvalue="comment" />
|
|
11
|
+
<item index="3" class="java.lang.String" itemvalue="noscript" />
|
|
12
|
+
<item index="4" class="java.lang.String" itemvalue="embed" />
|
|
13
|
+
<item index="5" class="java.lang.String" itemvalue="script" />
|
|
14
|
+
<item index="6" class="java.lang.String" itemvalue="custom-element" />
|
|
15
|
+
<item index="7" class="java.lang.String" itemvalue="dce-external-4" />
|
|
16
|
+
<item index="8" class="java.lang.String" itemvalue="html-demo-element" />
|
|
17
|
+
<item index="9" class="java.lang.String" itemvalue="dce-external" />
|
|
18
|
+
<item index="10" class="java.lang.String" itemvalue="dce-internal" />
|
|
19
|
+
<item index="11" class="java.lang.String" itemvalue="dce-hash" />
|
|
20
|
+
</list>
|
|
21
|
+
</value>
|
|
22
|
+
</option>
|
|
23
|
+
<option name="myCustomValuesEnabled" value="true" />
|
|
24
|
+
</inspection_tool>
|
|
25
|
+
</profile>
|
|
26
|
+
</component>
|
package/0/a.html
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
5
|
+
<title>custom-element Declarative Custom Element implementation demo</title>
|
|
6
|
+
<link rel="icon" href="demo/wc-square.svg" />
|
|
7
|
+
<script type="module" src="../custom-element.js"></script>
|
|
8
|
+
<style>
|
|
9
|
+
@import "demo/demo.css";
|
|
10
|
+
</style>
|
|
11
|
+
</head>
|
|
12
|
+
<body>
|
|
13
|
+
|
|
14
|
+
<custom-element src="../demo/embed-1.html" hidden>
|
|
15
|
+
loading from embed-1.html ...
|
|
16
|
+
</custom-element>
|
|
17
|
+
|
|
18
|
+
</body>
|
|
19
|
+
</html>
|
package/0/a.xml
ADDED
package/0/a.xsl
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
|
|
2
|
+
<xsl:output method="html"/>
|
|
3
|
+
|
|
4
|
+
<xsl:template match="/">
|
|
5
|
+
selecting <xsl:value-of select="count(//attributes)"/> attrs
|
|
6
|
+
<xsl:for-each select="//attributes">
|
|
7
|
+
<xsl:call-template name="attributes"/>
|
|
8
|
+
</xsl:for-each>
|
|
9
|
+
</xsl:template>
|
|
10
|
+
<xsl:template name="slot">
|
|
11
|
+
<xsl:param name="slotname"/>
|
|
12
|
+
<xsl:param name="defaultvalue"/>
|
|
13
|
+
<xsl:choose>
|
|
14
|
+
<xsl:when test="//payload/*[@slot=$slotname]">
|
|
15
|
+
<xsl:copy-of select="//payload/*[@slot=$slotname]"/>
|
|
16
|
+
</xsl:when>
|
|
17
|
+
<xsl:otherwise>
|
|
18
|
+
<xsl:copy-of select="$defaultvalue"/>
|
|
19
|
+
</xsl:otherwise>
|
|
20
|
+
</xsl:choose>
|
|
21
|
+
</xsl:template>
|
|
22
|
+
<xsl:template name="attributes">
|
|
23
|
+
|
|
24
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
|
|
25
|
+
<defs>
|
|
26
|
+
<linearGradient id="d">
|
|
27
|
+
<stop offset="0"/>
|
|
28
|
+
<stop offset=".5"/>
|
|
29
|
+
<stop offset=".80000001" stop-opacity=".46666667"/>
|
|
30
|
+
<stop offset="1" stop-opacity="0"/>
|
|
31
|
+
</linearGradient>
|
|
32
|
+
<linearGradient id="a">
|
|
33
|
+
<stop offset="0" stop-color="#fb0"/>
|
|
34
|
+
<stop offset=".5" stop-color="#e29d00"/>
|
|
35
|
+
<stop offset="1" stop-color="#fb0"/>
|
|
36
|
+
</linearGradient>
|
|
37
|
+
<linearGradient id="c">
|
|
38
|
+
<stop offset="0"/>
|
|
39
|
+
<stop offset="1" stop-opacity="0"/>
|
|
40
|
+
</linearGradient>
|
|
41
|
+
<linearGradient id="b">
|
|
42
|
+
<stop offset="0" stop-color="#ffc"/>
|
|
43
|
+
<stop offset=".5" stop-color="#fff965"/>
|
|
44
|
+
<stop offset="1" stop-color="#fc3"/>
|
|
45
|
+
</linearGradient>
|
|
46
|
+
<linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
|
|
47
|
+
<radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
|
|
48
|
+
<radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
|
|
49
|
+
<radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
|
|
50
|
+
</defs>
|
|
51
|
+
<path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
|
|
52
|
+
<path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
|
|
53
|
+
<path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
|
|
54
|
+
<path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
|
|
55
|
+
<use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
|
|
56
|
+
<path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
|
|
57
|
+
<path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
|
|
58
|
+
<use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
|
|
59
|
+
</svg></xsl:template>
|
|
60
|
+
<xsl:variable name="slottemplate">
|
|
61
|
+
<xsl:call-template name="slot">
|
|
62
|
+
<xsl:with-param name="slotname" select="''"/>
|
|
63
|
+
<xsl:with-param name="defaultvalue"/>
|
|
64
|
+
</xsl:call-template>
|
|
65
|
+
</xsl:variable>
|
|
66
|
+
</xsl:stylesheet>
|
package/0/a1.xsl
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dce="urn:schemas-epa-wg:dce" version="1.0">
|
|
2
|
+
<xsl:output method="html"/>
|
|
3
|
+
|
|
4
|
+
<xsl:template match="/">
|
|
5
|
+
<xsl:apply-templates select="//dce:attributes"/>
|
|
6
|
+
</xsl:template>
|
|
7
|
+
<xsl:template name="slot">
|
|
8
|
+
<xsl:param name="slotname"/>
|
|
9
|
+
<xsl:param name="defaultvalue"/>
|
|
10
|
+
<xsl:choose>
|
|
11
|
+
<xsl:when test="//dce:payload/*[@slot=$slotname]">
|
|
12
|
+
<xsl:copy-of select="//dce:payload/*[@slot=$slotname]"/>
|
|
13
|
+
</xsl:when>
|
|
14
|
+
<xsl:otherwise>
|
|
15
|
+
<xsl:copy-of select="$defaultvalue"/>
|
|
16
|
+
</xsl:otherwise>
|
|
17
|
+
</xsl:choose>
|
|
18
|
+
</xsl:template>
|
|
19
|
+
<xsl:template match="dce:attributes">
|
|
20
|
+
slot1
|
|
21
|
+
<xsl:call-template name="slot">
|
|
22
|
+
<xsl:with-param name="slotname" select="'slot1'"/>
|
|
23
|
+
<xsl:with-param name="defaultvalue"> 😃</xsl:with-param>
|
|
24
|
+
</xsl:call-template>
|
|
25
|
+
<hr/> slot2:
|
|
26
|
+
<xsl:call-template name="slot">
|
|
27
|
+
<xsl:with-param name="slotname" select="'slot2'"/>
|
|
28
|
+
<xsl:with-param name="defaultvalue"> 😃</xsl:with-param>
|
|
29
|
+
</xsl:call-template>
|
|
30
|
+
<input xmlns="http://www.w3.org/1999/xhtml" placeholder="🐇❤️{//*[@slot='slot2']}" />
|
|
31
|
+
</xsl:template>
|
|
32
|
+
<xsl:variable name="slottemplate">
|
|
33
|
+
<xsl:call-template name="slot">
|
|
34
|
+
<xsl:with-param name="slotname" select="''"/>
|
|
35
|
+
<xsl:with-param name="defaultvalue"/>
|
|
36
|
+
</xsl:call-template>
|
|
37
|
+
</xsl:variable>
|
|
38
|
+
</xsl:stylesheet>
|
package/0/ab.xsl
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
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:variable name="body">
|
|
9
|
+
<slot> Hello </slot> World!
|
|
10
|
+
</xsl:variable>
|
|
11
|
+
<xsl:template match="attributes">
|
|
12
|
+
<h1>attributes</h1>
|
|
13
|
+
<xsl:apply-templates mode="slots" select="."/>
|
|
14
|
+
<xsl:value-of select="//*[@slot=""] "/> World!
|
|
15
|
+
</xsl:template>
|
|
16
|
+
<xsl:template mode="slots" match="slot">
|
|
17
|
+
<xsl:copy />
|
|
18
|
+
</xsl:template>
|
|
19
|
+
<xsl:template mode="slots" match="*">
|
|
20
|
+
<xsl:copy />
|
|
21
|
+
</xsl:template>
|
|
22
|
+
|
|
23
|
+
</xsl:stylesheet>
|
package/0/az.xml
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
|
|
2
|
+
<xsl:output method="html"/>
|
|
3
|
+
|
|
4
|
+
<xsl:template match="/">
|
|
5
|
+
<xsl:for-each select="//attributes">
|
|
6
|
+
<xsl:call-template name="attributes"/>
|
|
7
|
+
</xsl:for-each>
|
|
8
|
+
</xsl:template>
|
|
9
|
+
<xsl:template name="slot">
|
|
10
|
+
<xsl:param name="slotname"/>
|
|
11
|
+
<xsl:param name="defaultvalue"/>
|
|
12
|
+
<xsl:choose>
|
|
13
|
+
<xsl:when test="//payload/*[@slot=$slotname]">
|
|
14
|
+
<xsl:copy-of select="//payload/*[@slot=$slotname]"/>
|
|
15
|
+
</xsl:when>
|
|
16
|
+
<xsl:otherwise>
|
|
17
|
+
<xsl:copy-of select="$defaultvalue"/>
|
|
18
|
+
</xsl:otherwise>
|
|
19
|
+
</xsl:choose>
|
|
20
|
+
</xsl:template>
|
|
21
|
+
<xsl:template name="attributes"><html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><h4>embed-1.html</h4>
|
|
22
|
+
<custom-element tag="dce-embed-1">🖖</custom-element>
|
|
23
|
+
<dce-embed-1>?</dce-embed-1></body></html></xsl:template>
|
|
24
|
+
<xsl:variable name="slottemplate">
|
|
25
|
+
<xsl:call-template name="slot">
|
|
26
|
+
<xsl:with-param name="slotname" select="''"/>
|
|
27
|
+
<xsl:with-param name="defaultvalue"/>
|
|
28
|
+
</xsl:call-template>
|
|
29
|
+
</xsl:variable>
|
|
30
|
+
</xsl:stylesheet>
|
package/0/b.html
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
|
|
2
|
+
<xsl:output method="html"/>
|
|
3
|
+
|
|
4
|
+
<xsl:template match="/">
|
|
5
|
+
<xsl:apply-templates select="//attributes"/>
|
|
6
|
+
</xsl:template>
|
|
7
|
+
<xsl:template match="attributes">
|
|
8
|
+
<h3 xmlns="http://www.w3.org/1999/xhtml">
|
|
9
|
+
<xsl:value-of select="title"/>
|
|
10
|
+
</h3> <!-- title is an attribute in instance
|
|
11
|
+
mapped into /*/attributes/title -->
|
|
12
|
+
<xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//smile"> <!-- data-smile DCE instance attribute,
|
|
13
|
+
mapped into /*/dataset/smile
|
|
14
|
+
used in condition -->
|
|
15
|
+
<!-- data-smile DCE instance attribute, used as HTML -->
|
|
16
|
+
<div>Smile as:
|
|
17
|
+
<xsl:value-of select="//smile"/>
|
|
18
|
+
</div>
|
|
19
|
+
</xsl:if>
|
|
20
|
+
<!-- image would not be visible in sandbox, see live demo -->
|
|
21
|
+
<img xmlns="http://www.w3.org/1999/xhtml"
|
|
22
|
+
src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
|
|
23
|
+
alt="{title} image"/>
|
|
24
|
+
<!-- image-src and title are DCE instance attributes,
|
|
25
|
+
mapped into /*/attributes/
|
|
26
|
+
used within output attribute via curly brackets -->
|
|
27
|
+
|
|
28
|
+
<!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
|
|
29
|
+
<p xmlns="http://www.w3.org/1999/xhtml">
|
|
30
|
+
<xsl:value-of select="//*[@slot="description"]"/>
|
|
31
|
+
</p>
|
|
32
|
+
<xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
|
|
33
|
+
<!-- loop over payload elements with `pokemon-id` attribute -->
|
|
34
|
+
<button>
|
|
35
|
+
<img height="32"
|
|
36
|
+
src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
|
|
37
|
+
alt="{text()}"/>
|
|
38
|
+
<br/>
|
|
39
|
+
<xsl:value-of select="text()">
|
|
40
|
+
</xsl:value-of>
|
|
41
|
+
</button>
|
|
42
|
+
|
|
43
|
+
</xsl:for-each>
|
|
44
|
+
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
|
|
45
|
+
<xsl:output method="html"/>
|
|
46
|
+
|
|
47
|
+
<xsl:template match="/">
|
|
48
|
+
<xsl:apply-templates select="//attributes"/>
|
|
49
|
+
</xsl:template>
|
|
50
|
+
<xsl:template match="attributes">
|
|
51
|
+
<h3 xmlns="http://www.w3.org/1999/xhtml">
|
|
52
|
+
<xsl:value-of select="title"/>
|
|
53
|
+
</h3> <!-- title is an attribute in instance
|
|
54
|
+
mapped into /*/attributes/title -->
|
|
55
|
+
<xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//smile"> <!-- data-smile DCE instance attribute,
|
|
56
|
+
mapped into /*/dataset/smile
|
|
57
|
+
used in condition -->
|
|
58
|
+
<!-- data-smile DCE instance attribute, used as HTML -->
|
|
59
|
+
<div>Smile as:
|
|
60
|
+
<xsl:value-of select="//smile"/>
|
|
61
|
+
</div>
|
|
62
|
+
</xsl:if>
|
|
63
|
+
<!-- image would not be visible in sandbox, see live demo -->
|
|
64
|
+
<img xmlns="http://www.w3.org/1999/xhtml"
|
|
65
|
+
src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
|
|
66
|
+
alt="{title} image"/>
|
|
67
|
+
<!-- image-src and title are DCE instance attributes,
|
|
68
|
+
mapped into /*/attributes/
|
|
69
|
+
used within output attribute via curly brackets -->
|
|
70
|
+
|
|
71
|
+
<!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
|
|
72
|
+
<p xmlns="http://www.w3.org/1999/xhtml">
|
|
73
|
+
<xsl:value-of select="//*[@slot="description"]"/>
|
|
74
|
+
</p>
|
|
75
|
+
<xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
|
|
76
|
+
<!-- loop over payload elements with `pokemon-id` attribute -->
|
|
77
|
+
<button>
|
|
78
|
+
<img height="32"
|
|
79
|
+
src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
|
|
80
|
+
alt="{text()}"/>
|
|
81
|
+
<br/>
|
|
82
|
+
<xsl:value-of select="text()">
|
|
83
|
+
</xsl:value-of>
|
|
84
|
+
</button>
|
|
85
|
+
|
|
86
|
+
</xsl:for-each>
|
|
87
|
+
</xsl:template>
|
|
88
|
+
</xsl:stylesheet>
|
|
89
|
+
</xsl:template>
|
|
90
|
+
</xsl:stylesheet>
|
package/README.md
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
[WCCG in Declarative custom elements](https://github.com/w3c/webcomponents-cg/issues/32#issuecomment-1321037301)
|
|
4
4
|
discussion. The functionality of DCE and its data access does not require programming using JavaScript.
|
|
5
5
|
|
|
6
|
-
It allows to define custom HTML tag with template filled from slots
|
|
7
|
-
[local-storage][local-storage-demo]
|
|
6
|
+
It allows to define custom HTML tag with template filled from slots, attributes and data `slice` as of now from
|
|
7
|
+
[local-storage][local-storage-demo], [http-request][http-request-demo], [location][location-demo].
|
|
8
8
|
UI is re-rendered on each data slice change.
|
|
9
9
|
|
|
10
10
|
[![git][github-image] GitHub][git-url]
|
|
@@ -88,6 +88,10 @@ generates HTML
|
|
|
88
88
|
NOTE: attempt to register custom element with already registered tag name would fail due to w3c standard limitations.
|
|
89
89
|
The scoped custom element registry is still a proposal.
|
|
90
90
|
|
|
91
|
+
### omitting `tag` leads to template instantiation
|
|
92
|
+
Whether template is inline or given by `src` attribute, the `custom-element` would be instantiated inline if no `tag`
|
|
93
|
+
attribute is given.
|
|
94
|
+
|
|
91
95
|
### custom element instance
|
|
92
96
|
constructor creates XML with
|
|
93
97
|
* root matching the tag
|
|
@@ -98,6 +102,29 @@ constructor creates XML with
|
|
|
98
102
|
|
|
99
103
|
DOM content is replaced with results of instance XML transformation by declaration XSLT.
|
|
100
104
|
|
|
105
|
+
# `src` attribute
|
|
106
|
+
allows to refer either external template or template within external library by `#id` hash in URL.
|
|
107
|
+
|
|
108
|
+
See [demo](demo/external-template.html) with various samples.
|
|
109
|
+
|
|
110
|
+
## types of template
|
|
111
|
+
* HTML with DCE syntax ( slots, data slices, xslt operators, etc. )
|
|
112
|
+
* SVG image, MathML, etc.
|
|
113
|
+
* XSLT template. The `datadom` is the XML payload for transformation. In order to be embedded into external document,
|
|
114
|
+
this document has to have XML syntax like XHTML. Attempt of including XSLT within HTML file would break the template
|
|
115
|
+
integrity by parser.
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
## `#id` Local reference
|
|
119
|
+
allows to refer the template withing same document
|
|
120
|
+
|
|
121
|
+
## `url`
|
|
122
|
+
allows to use the external document as template
|
|
123
|
+
|
|
124
|
+
## `url#id`
|
|
125
|
+
allows to refer the template withing external document
|
|
126
|
+
|
|
127
|
+
|
|
101
128
|
# template syntax
|
|
102
129
|
## Attributes
|
|
103
130
|
curly braces `{}` in attributes implemented as [attribute value template](https://www.w3.org/TR/xslt20/#attribute-value-templates)
|
|
@@ -187,12 +214,13 @@ within template
|
|
|
187
214
|
[demo-url]: https://unpkg.com/@epa-wg/custom-element@0.0/index.html
|
|
188
215
|
[local-storage-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/local-storage.html
|
|
189
216
|
[http-request-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/http-request.html
|
|
217
|
+
[location-demo]: https://unpkg.com/@epa-wg/custom-element@0.0/demo/location.html
|
|
190
218
|
[github-image]: https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
|
|
191
219
|
[npm-image]: https://img.shields.io/npm/v/@epa-wg/custom-element.svg
|
|
192
220
|
[npm-url]: https://npmjs.org/package/@epa-wg/custom-element
|
|
193
|
-
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
194
|
-
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
195
|
-
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.
|
|
221
|
+
[coverage-image]: https://unpkg.com/@epa-wg/custom-element-test@0.0.11/coverage/coverage.svg
|
|
222
|
+
[coverage-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.11/coverage/lcov-report/index.html
|
|
223
|
+
[storybook-url]: https://unpkg.com/@epa-wg/custom-element-test@0.0.11/storybook-static/index.html?path=/story/welcome--introduction
|
|
196
224
|
[sandbox-url]: https://stackblitz.com/github/EPA-WG/custom-element?file=index.html
|
|
197
225
|
[webcomponents-url]: https://www.webcomponents.org/element/@epa-wg/custom-element
|
|
198
226
|
[webcomponents-img]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
|