Help us understand the problem. What is going on with this article?

Web Componentsの構成要素まとめ(応用編)

More than 5 years have passed since last update.

前回記事の応用で、Shadowの特徴のまとめ記事

Shadow の特徴

  • 複数のShadow Root
  • 挿入ポイント(Insert Points)と分散ノード(Distributed Nodes)
  • イベントの設定
  • 参考

複数のShadow Root

  • 同じホストからの生成された複数のShadow Rootに、別々に要素を追加すると、最後に追加した要素のみが出力される。
<script>
window.onload = function() {
  var container = document.getElementById('container');
  var rootFirst = container.createShadowRoot();
  var rootSecond = container.createShadowRoot();
  rootFirst.innerHTML = '<div>This is first root</div>'; //表示されない
  rootSecond.innerHTML = '<div>This is second root</div>'; //表示される
};
</script>
<div id="container"></div>
  • 同じホストから生成された複数のShadow Rootの要素を出力するためには<shadow>要素を使用する。
  • <shadow>要素内には直前に追加された要素が出力される。
<script>
window.onload = function() {
  var container = document.getElementById('container');
  var rootFirst = container.createShadowRoot();
  var rootSecond = container.createShadowRoot();
  rootFirst.innerHTML = '<div>This is first root</div>'; //secondRootの<shadow>タグの中に表示される。
  rootSecond.innerHTML = '<shadow></shadow><div>This is second root</div>'; //表示される。
};
</script>
<div id="container"></div>
  • Shadow Rootのホスト要素(<div id="container">)の内容を出力するためには<content>タグを使用する。
<script>
window.onload = function() {
  var container = document.getElementById('container');
  var rootFirst = container.createShadowRoot();
  var rootSecond = container.createShadowRoot();
  rootFirst.innerHTML = '<div>This is first root</div>'; //secondRootの<shadow>タグの中に表示される。
  rootSecond.innerHTML = '<shadow></shadow><div>This is second root</div><content></content>'; //表示される。
};
</script>
<div id="container">This is container</div> <!-- "This is container"はrootSecondの<content>タグの中に表示される。 -->

挿入ポイント(Insert Points)と分散ノード(Distributed Nodes)

  • <shadow><content>要素を挿入ポイント(Insert Points)という。
  • <shadow><content>要素に表示される要素を分散ノード(Distributed Nodes)という。
  • <shadow><content>要素の子要素として分散ノードにアクセスすることはできない。
<script>
window.onload = function() {
  var container = document.getElementById('container');
  var rootFirst = container.createShadowRoot();
  var rootSecond = container.createShadowRoot();
  rootFirst.innerHTML = '<div>This is first root</div>';
  rootSecond.innerHTML = '<shadow></shadow><div>This is second root</div><content></content>';

  console.log(rootSecond.querySelector('content p')); // null
};
</script>
<div id="container"><p>This is container</p></div>
  • getDistributedNodes() を使用して、挿入ポイントに表示される分散ノードにアクセスできる。
  • getDestinationInsertionPoints() を使用して、分散ノードが表示される挿入ポイントにアクセスできる。
<script>
window.onload = function() {
  var container = document.getElementById('container');
  var rootFirst = container.createShadowRoot();
  var rootSecond = container.createShadowRoot();
  rootFirst.innerHTML = '<div>This is first root</div>';
  rootSecond.innerHTML = '<shadow></shadow><div>This is second root</div><content></content>';

  console.log(rootSecond.querySelector('content').getDistributedNodes()); //<p>This is container</p>
  console.log(container.querySelector('p').getDestinationInsertionPoints()); //<content></content>
};
</script>
<div id="container"><p>This is container</p></div>

イベントの設定

  • document要素からShadow DOMにイベントを設定することはできない。
  • Shadow DOMに対するイベントは、全てホスト要素から発生するように再調整される。
<input type="text" placeholder="ホスト">
<div id="container"><p>content</p></div>
<script>
  window.onload = function() {
    var host = document.getElementById('container');
    var root = host.createShadowRoot();
    root.innerHTML = '<input type="text" placeholder="Shadow DOM">' +
      '<p id="one">One</p>' +
      '<p id="two">Two</p>' +
      '<content></content>' +
      '<p id="three">Three</p>' +
      '<p id="four">Four</p>';

    //Shadow DOM内の要素をクリックすると<div id="container">要素がターゲットになっている。
    document.addEventListener('click', function(e) { 
      console.log(e.target);
    });

    //Shadow DOM内のinput要素をクリックしても発生しない。
    //ホストのinput要素をクリックすると発生する。
    document.querySelector('input').addEventListener('click', function(e) {
      console.log(e.target);
    });
  }
</script>
  • Shadow DOMにイベントを設定する場合は、Shadow Rootから対象要素を取得して設定する。
<input type="text" placeholder="ホスト">
<div id="container"><p>content</p></div>
<script>
  window.onload = function() {
    var host = document.getElementById('container');
    var root = host.createShadowRoot();
    root.innerHTML = '<input type="text" placeholder="Shadow DOM">' +
      '<p id="one">One</p>' +
      '<p id="two">Two</p>' +
      '<content></content>' +
      '<p id="three">Three</p>' +
      '<p id="four">Four</p>';

    //Shadow DOM内のinput要素をクリックすると発生する。
    //ホストのinput要素をクリックしても発生しない。
    root.querySelector('input').addEventListener('click', function(e) {
      console.log(e.target);
    });
  }
</script>

参考

Shadow DOM 201
Shadow DOM 301
W3C Shadow DOM

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした