1

Shadow DOM でカプセル化されたカスタム要素を作成する次のコードがあります。

'use strict'
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {

    var root = this.createShadowRoot();
    var divEl = document.createElement('div');
    divEl.setAttribute("id", "container");
    divEl.innerHTML =
        "<input id='input' type='text'>"
      + "<br>"
      + "Result: <span id='result'></span>"
      + "<br><button onclick='performTask()'>Run</button>";
    root.appendChild(divEl);

};
document.registerElement('custom-ele', {
    prototype: proto
});

「実行」をクリックすると、入力が入力要素から取得されて処理され (performTask() で)、出力が「#result」に配置されます。私の2つの質問は次のとおりです。

  1. Shadow DOM の入力フィールドから値を取得するにはどうすればよいですか?
  2. 出力を #result に配置するにはどうすればよいですか?

この 以前のスタック オーバーフローの投稿は私の質問に答えているように見えますが、提案されたリンクはすべて無効になっているため、誰かが私を正しい方向に向けることができるかどうか疑問に思っています :)

PS HTML インポートはすべてのブラウザーでサポートされているわけではなく、すべてのカスタム要素コードを 1 つのファイルに含める必要があるため、テンプレートは使用したくありません。

4

2 に答える 2