1+ <!DOCTYPE html>
2+ < html >
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < title > Shadow DOM</ title >
6+ </ head >
7+ < body >
8+ < div id ="on_page ">
9+ < span > This is on the page DOM</ span >
10+ </ div > </ br >
11+ < div id ="shadow_host "> </ div > </ br >
12+ < div id ="delayed_attached "> </ div >
13+ < a href ="javascript:return false; " onclick ="attachAfterDelay(); return false; "> Attach with delay</ a > < br />
14+ < div id ="closed_host "> This is a closed host</ div > </ br >
15+ < div id ="delayed_open "> </ div > </ br >
16+ < a href ="javascript:return false; " onclick ="openAfterDelay(); return false; "> Open with delay</ a > < br />
17+
18+ < script >
19+ let shadowRoot = document . getElementById ( 'shadow_host' ) . attachShadow ( { mode : 'open' } ) ;
20+ shadowRoot . innerHTML = `
21+ <span>This is within the shadow dom</span>
22+ <div id="nested_shadow_host"></div>
23+ <input type="edit" />
24+ ` ;
25+
26+ let nestedShadowRoot = shadowRoot . getElementById ( 'nested_shadow_host' ) . attachShadow ( { mode : 'open' } ) ;
27+ nestedShadowRoot . innerHTML = `
28+ <div id="nested_div"><div>This is within a nested shadowDOM</div></div>
29+ ` ;
30+ </ script >
31+ < script >
32+ function attachAfterDelay ( ) {
33+ setTimeout ( 'attachShadowDom()' , 750 )
34+ } ;
35+ function attachShadowDom ( ) {
36+ let delayedAttachedShadowRoot = document . getElementById ( 'delayed_attached' ) . attachShadow ( { mode : 'open' } ) ;
37+
38+ delayedAttachedShadowRoot . innerHTML = `
39+ <div id="delayed_attached_content">delayed attached</div>
40+ ` ;
41+ } ;
42+
43+ let delayedOpenShadowRoot = document . getElementById ( 'delayed_open' ) . attachShadow ( { mode : 'closed' } ) ;
44+ delayedOpenShadowRoot . innerHTML = `
45+ <div id="delayed_opened_content">
46+ <div>
47+ This is within once/currently closed shadowDOM</br>
48+ and will be/has been opened after a delay.
49+ </div>
50+ </div>
51+ ` ;
52+
53+ function openAfterDelay ( ) {
54+ setTimeout ( 'openShadowDom()' , 750 )
55+ } ;
56+ function openShadowDom ( ) {
57+ // delayedOpenShadowRoot.attachShadow({mode: 'open'});
58+ document . getElementById ( 'delayed_open' ) . attachShadow ( { mode : 'open' } ) ;
59+ } ;
60+ </ script >
61+ </ body >
62+ </ html >
0 commit comments