@todojs/

02-light-dom-shadow-dom

HTML, CSS, JS

No description

fork
loading
Files
  • index.html

This Plugin Crashed!

Error: Error: must not create an existing file {"type":"CREATE_FILE","wid":"0.285634108954941","path":"index.html","file":{"path":"index.html","content":{"asEncoding":{"base64":"PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDx0aXRsZT5MaWdodCBET008L3RpdGxlPgo8L2hlYWQ+Cjxib2R5Pgo8ZGl2IGlkPSJ0ZXN0Ij48cD5MaWdodCBET00gY29udGVudDwvcD48L2Rpdj4KPGJ1dHRvbiBpZD0iYXR0YWNoIj5BdHRhY2hTaGFkb3c8L2J1dHRvbj4KPGJ1dHRvbiBpZD0iZmluZCI+ZG9jdW1lbnQucXVlcnlTZWxlY3RvcignZGl2ID4gUCcpPC9idXR0b24+CjxwcmU+PC9wcmU+CjxzY3JpcHQ+CiAgY29uc3QgYXR0YWNoID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvciAoJyNhdHRhY2gnKTsKICBhdHRhY2guYWRkRXZlbnRMaXN0ZW5lciAoJ2NsaWNrJywgZnVuY3Rpb24gKCkgewogICAgY29uc3QgZGl2ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvciAoJyN0ZXN0Jyk7CiAgICBkaXYuYXR0YWNoU2hhZG93ICh7bW9kZSA6ICdvcGVuJ30pOwogICAgZGl2LnNoYWRvd1Jvb3QuaW5uZXJIVE1MID0gJzxwPlNoYWRvdyBET00gY29udGVudDwvcD4nOwogICAgcmVzdWx0LmlubmVySFRNTCAgICAgICAgID0gJyc7CiAgfSk7CgogIGNvbnN0IHJlc3VsdCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IgKCdwcmUnKTsKICBjb25zdCBmaW5kICAgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yICgnI2ZpbmQnKTsKICBmaW5kLmFkZEV2ZW50TGlzdGVuZXIgKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgIGNvbnN0IGVsZW1lbnQgICAgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yICgnZGl2ID4gcCcpOwogICAgcmVzdWx0LmlubmVySFRNTCA9IGVsZW1lbnQuaW5uZXJUZXh0OwogIH0pOwo8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+"},"asBuffer":null},"loaded":true}}
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Light DOM</title>
</head>
<body>
<div id="test"><p>Light DOM content</p></div>
<button id="attach">AttachShadow</button>
<button id="find">document.querySelector('div > P')</button>
<pre></pre>
<script>
  const attach = document.querySelector ('#attach');
  attach.addEventListener ('click', function () {
    const div = document.querySelector ('#test');
    div.attachShadow ({mode : 'open'});
    div.shadowRoot.innerHTML = '<p>Shadow DOM content</p>';
    result.innerHTML         = '';
  });

  const result = document.querySelector ('pre');
  const find   = document.querySelector ('#find');
  find.addEventListener ('click', function () {
    const element    = document.querySelector ('div > p');
    result.innerHTML = element.innerText;
  });
</script>
</body>
</html>
result
console