15

Chrome Canary (33.0.1712.3) のインポート、テンプレート、シャドウ DOM、およびカスタム要素を調査しています。グリッド レイアウトには、ファイルからインポートされたさまざまな Web コンポーネントまたは複製されたライト DOM フラグメントを表示する特定のコンテンツ要素 (ディスプレイの領域) があります。

ただし、シャドウ DOM を追加すると、シャドウ ルートを削除する方法がわからないため、通常の HTML DOM を再表示できません。一度作成されると、シャドウ ルートは残り、通常の DOM のレンダリングを妨げます。(Web コンポーネントの紹介、シャドウ DOM、テンプレート、HTML5 Rocks に関する Bidelman の記事など、さまざまな W3C 仕様を調べました) 以下の簡単な例で問題を切り分けました。

「普通の古いdivを表示」をクリックします。「影付きのテンプレートを表示」をクリックします。「普通の古いdivを表示」をクリックします。クリックするたびに devtools で検査します。3回目のクリックの後、ボタンの下とdevtoolsに出力がありません：

<div id="content">
  #document-fragment
  <div id="plaindiv">Plain old div</div>
</div>

シャドウ ルートを削除し、コンテンツ要素を初期状態に完全にリセットするには、removeShadow() に何を追加する必要がありますか?

remove_shadows.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

  <template id="shadowedTemplateComponent">
    <style>
      div { background: lightgray; }
      #t { color: red; }
    </style>

    <div id="t">template</div>

    <script>console.log("Activated the shadowed template component.");</script>
  </template>

  <template id="plainDiv">
    <div id="plaindiv">Plain old div</div>
  </template>
</head>

<body>
<div>
  <input type="button" value="show plain old div" onclick="showPlainOldDiv()"/>
  <input type="button" value="show shadowed template" onclick="showShadowTemplate()"/>
  <div id="content"></div>
</div>

<script>
  function removeChildren(elt) {
    console.log('removing children: %s', elt);
    while (elt.firstChild) {
      elt.removeChild(elt.firstChild);
    }
  }
  function removeShadow(elt) {
    if (elt.shadowRoot) {
      console.log('removing shadow: %s', elt);
      removeChildren(elt.shadowRoot); // Leaves the shadow root property.
      // elt.shadowRoot = null; doesn't work
      // delete elt.shadowRoot; doesn't work
      // What goes here to delete the shadow root (#document-fragment in devtools)?
    }
  }

  function showPlainOldDiv() {
    console.log('adding a plain old div');
    var host = document.querySelector('#content');
    removeChildren(host);
    removeShadow(host);
    var template = document.querySelector('#plainDiv');
    host.appendChild(template.content.cloneNode(true));
  }

  function showShadowTemplate() {
    console.log('adding shadowed template component');
    var host = document.querySelector('#content');
    removeChildren(host);
    removeShadow(host);
    var template = document.querySelector('#shadowedTemplateComponent');
    var root = host.shadowRoot || host.webkitCreateShadowRoot();
    root.appendChild(template.content.cloneNode(true));
  }
</script>
</body>
</html>
4

4 に答える 4

5

一度追加したシャドウ ルートは削除できません。ただし、新しいものと交換することはできます。

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/で述べたように、最新のシャドウ ルートが「勝ち」、レンダリングされたルートになります。

<content>シャドウ ルートを疑似要素のみを含む新しいシャドウ ルートに置き換えて、ライト DOM からシャドウ DOM にすべてを挿入することができます。その時点で、私が知る限り、Shadow DOM がまったくない場合と機能的に同等になります。

于 2014-01-01T23:53:13.717 に答える