-
Notifications
You must be signed in to change notification settings - Fork 38
Expand file tree
/
Copy pathCustomElementPrototype.html
More file actions
134 lines (114 loc) · 11.9 KB
/
Copy pathCustomElementPrototype.html
File metadata and controls
134 lines (114 loc) · 11.9 KB
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CustomElementPrototype JavaScript API</title><meta name="description" content="Interactive API reference for the JavaScript CustomElementPrototype Object. The prototype used for a custom element created with customElements.define()."><link rel="stylesheet" type="text/css" href="styles.css"><script type="text/javascript">var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23450559-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script></head><body><script>if (sessionStorage.collapsed === 'true') {
document.body.classList.add('members-collapsed');
}
if (localStorage.theme) {
document.body.parentElement.classList.add(localStorage.theme);
}</script><div class="topnav"><a href="/">JavaScripture</a><div class="bookmarks"><a class="bookmark contribute" href="https://github.com/nkronlage/JavaScripture">Contribute via GitHub</a> <a class="bookmark" href="/feedback">Feedback</a></div></div><div class="container"><nav class="leftnav"><div id="searchContainer"><input id="searchBox" type="text" placeholder="Search (Ctrl + S)" autocomplete="false"><div id="resultsBox" style="display:none;"></div></div><div id="apichooser"><a href="#" onclick="openApiChooser(); return false;"><div class="arrow"></div><span id="selectedsets"></span></a><div id="obscure"></div><div id="apisets"><ul></ul></div></div><div class="toc"><h2>CustomElementPrototype</h2><div class="navgroup"><div class="group collapsed"><a href="#InstanceMethods" onclick="expandoClicked(this.parentNode); return false;"><div class="arrow"></div>Instance Methods</a><div class="subgroup"><a href="#adoptedCallback_Document_Document">adoptedCallback</a><a href="#attributeChangedCallback_String_Object_Object_String" title="attributeChangedCallback">attributeChangedCallback</a><a href="#connectedCallback_" title="connectedCallback">connectedCallback</a><a href="#disconnectedCallback_" title="disconnectedCallback">disconnectedCallback</a></div></div><a href="CustomElementPrototype#Details">Details</a></div><h2>Components API</h2><div id="related-apis" class="navgroup"></div><h2>All API</h2><div id="rootObjs" class="navgroup"><span class="empty">No API set selected.</span></div></div></nav><div class="content"><h1 class="declaration"><span class="object">CustomElementPrototype</span> <span class="type">: <a href="/HTMLElement">HTMLElement</a></span></h1><div class="metadata"></div><div class="objectdescription">The prototype used for a custom element created with <a href="/CustomElementRegistry#define"><code>customElements.define()</code></a>.</div><div><a name="InstanceMethods"></a><h2>Instance Methods</h2><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="adoptedCallback"></a> <a name="adoptedCallback_Document_Document"></a><div class="declaration"><span class="membername primary">adoptedCallback</span>(<span class="membername">oldDocument</span> : <a class="membertype" href="/Document">Document</a>, <span class="membername">newDocument</span> : <a class="membertype" href="/Document">Document</a>) : <a class="membertype" href="/undefined">undefined</a></div><div class="member-body"><p class="description">Called when <a href="/Document#adoptNode">adopted</a> into a new Document.</p><div class="htmlexample"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="19" cols="60" wrap="off">
<style>
my-element {
border: 1px solid green;
}
</style>
<my-element>MyElement from HTML</my-element>
<iframe id="frame"></iframe>
<script>
class MyElement extends HTMLElement {
adoptedCallback(oldDocument, newDocument) {
console.log(`adopted from ${oldDocument.documentURI} to ${newDocument.documentURI}`);
}
}
customElements.define('my-element', MyElement);
// Create an instance via JavaScript
var myElement = new MyElement();
myElement.textContent = "MyElement from Code";
document.body.appendChild(myElement);
var frameDoc = document.querySelector('#frame').contentDocument;
frameDoc.body.appendChild(myElement);
</script>
</textarea><a onclick='executeHTMLExample(this.parentNode.parentNode, "CustomElementPrototype.adoptedCallback"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="htmlerrormessage" style="display: none"></div><iframe class="output" width="350" height="200"></iframe><pre class="results"> </pre></div></div></div><p></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="attributeChangedCallback"></a> <a name="attributeChangedCallback_String_Object_Object_String"></a><div class="declaration"><span class="membername primary">attributeChangedCallback</span>(<span class="membername">name</span> : <a class="membertype" href="/String">String</a>, <span class="membername">oldValue</span> : <a class="membertype" href="/Object">Object</a>, <span class="membername">newValue</span> : <a class="membertype" href="/Object">Object</a>, <span class="membername">namespace</span> : <a class="membertype" href="/String">String</a>) : <a class="membertype" href="/undefined">undefined</a></div><div class="member-body"><p class="description">Called when an attribute was changed on the element. See also <a href="/MutationObserver">MutationObserver</a>.</p><div class="htmlexample"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="19" cols="60" wrap="off">
<style>
my-element {
border: 1px solid green;
}
</style>
<my-element foo="htmlattr">MyElement from HTML</my-element>
<script>
class MyElement extends HTMLElement {
static get observedAttributes() { return ['foo']; }
attributeChangedCallback(name, oldValue, newValue) {
console.log(`${name} changed from "${oldValue}" to "${newValue}"`);
}
}
customElements.define('my-element', MyElement);
// Create an instance via JavaScript
var myElement = new MyElement();
myElement.textContent = "MyElement from Code";
document.body.appendChild(myElement);
myElement.setAttribute('foo', 'codeattr');
</script>
</textarea><a onclick='executeHTMLExample(this.parentNode.parentNode, "CustomElementPrototype.attributeChangedCallback"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="htmlerrormessage" style="display: none"></div><iframe class="output" width="350" height="200"></iframe><pre class="results"> </pre></div></div></div><p></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="connectedCallback"></a> <a name="connectedCallback_"></a><div class="declaration"><span class="membername primary">connectedCallback</span>() : <a class="membertype" href="/undefined">undefined</a></div><div class="member-body"><p class="description">Called when the custom element is inserted into the document or when the prototype is applied to elements already in the tree at the time <a href="/CustomElements#define"><code>customElements.define()</code></a> is called. See also <a href="/MutationObserver">MutationObserver</a>.</p><div class="htmlexample"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="19" cols="60" wrap="off">
<style>
my-element {
border: 1px solid green;
}
</style>
<my-element>MyElement from HTML</my-element>
<script>
class MyElement extends HTMLElement {
connectedCallback() {
console.log('element parented to ' + this.parentElement.tagName);
}
}
customElements.define('my-element', MyElement);
// Create an instance via JavaScript
var myElement = new MyElement();
myElement.textContent = "MyElement from Code";
document.body.appendChild(myElement);
</script>
</textarea><a onclick='executeHTMLExample(this.parentNode.parentNode, "CustomElementPrototype.connectedCallback"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="htmlerrormessage" style="display: none"></div><iframe class="output" width="350" height="200"></iframe><pre class="results"> </pre></div></div></div><p></p></div></div><div class="member"><div class="expand-members" title="Toggle showing all descriptions and examples"></div><a name="disconnectedCallback"></a> <a name="disconnectedCallback_"></a><div class="declaration"><span class="membername primary">disconnectedCallback</span>() : <a class="membertype" href="/undefined">undefined</a></div><div class="member-body"><p class="description">Called when the element is removed from the document. See also <a href="/MutationObserver">MutationObserver</a>.</p><div class="htmlexample"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="19" cols="60" wrap="off">
<style>
my-element {
border: 1px solid green;
}
</style>
<my-element>MyElement from HTML</my-element>
<script>
class MyElement extends HTMLElement {
disconnectedCallback() {
console.log('element disconnected');
}
}
customElements.define('my-element', MyElement);
document.body.removeChild(document.querySelector('my-element'));
</script>
</textarea><a onclick='executeHTMLExample(this.parentNode.parentNode, "CustomElementPrototype.disconnectedCallback"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="htmlerrormessage" style="display: none"></div><iframe class="output" width="350" height="200"></iframe><pre class="results"> </pre></div></div></div><p></p></div></div></div><a name="Details"></a><h2>Details</h2><div class="details"><p>The following example demonstrates how to create a custom element based on <a href="/HTMLElement">HTMLElement</a>.</p><div class="htmlexample"><div class="codePanel"><h4>Example:</h4><textarea class="code" rows="19" cols="60" wrap="off">
<style>
my-element {
border: 1px solid green;
}
</style>
<my-element>MyElement from HTML</my-element>
<script>
class MyElement extends HTMLElement {
constructor() {
super();
// Hook up click listener to set the color to red
this.addEventListener('click', function(event) {
event.target.style.color = 'red';
});
}
}
customElements.define('my-element', MyElement);
// Create an instance via JavaScript
var myElement = new MyElement();
myElement.textContent = "MyElement from Code";
document.body.appendChild(myElement);
</script>
</textarea><a onclick='executeHTMLExample(this.parentNode.parentNode, "CustomElementPrototype.CustomElementPrototype"); return false' href="#" class="run">Run</a></div><div class="resultsPanel"><h4>Results:</h4><div style="position: relative"><div class="htmlerrormessage" style="display: none"></div><iframe class="output" width="350" height="200"></iframe><pre class="results"> </pre></div></div></div></div><div class="bottomnav"><a href="/">home</a> <a href="/license">license</a> <a href="https://github.com/nkronlage/JavaScripture">contribute</a> <a href="/feedback">feedback</a> <a id="toggle-theme" href="#">toggle light/dark mode</a></div><div class="copyright">Copyright © JavaScripture Contributors</div></div></div></body><script src="javascripture.js"></script></html>