3

テンプレートをシャドウ DOM に追加しようとすると、「#documentFragment」としてのみ表示され、テンプレート内で構造化された実際の要素をレンダリングまたはコピーすることはありません。

私はそれを理解しようと何時間も費やしました。私が見つけた解決策は、次を使用することでした：

  • template.firstElementChild.cloneNode(true);

それ以外の：

  • template.content.cloneNode(true);

そのときだけ、すべてが期待どおりに機能します。

私の質問は、私は何か間違ったことをしていますか?

const template = document.createElement('template');
const form = document.createElement('form');
const gateway = document.createElement('fieldset');
const legend = document.createElement('legend');
gateway.appendChild(legend);
const username = document.createElement('input');
username.setAttribute('type', 'email');
username.setAttribute('name', 'username');
username.setAttribute('placeholder', 'email@address.com');
username.setAttribute('id', 'username');
gateway.appendChild(username);
const button = document.createElement('button');
button.setAttribute('type', 'button');
button.innerHTML = 'Next';
gateway.appendChild(button);
form.appendChild(gateway);
template.appendChild(form);
class UserAccount extends HTMLElement {
  constructor() {
    super();
    const shadowDOM = this.attachShadow({
      mode: 'open'
    });
    const clone = template.firstElementChild.cloneNode(true);
    // This does not work
    // const clone = template.content.cloneNode(true);
    shadowDOM.appendChild(clone);
    shadowDOM.querySelector('legend').innerHTML = this.getAttribute('api');
  }
}
window.customElements.define('user-account', UserAccount);
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  <!-- <link rel="stylesheet" href="./css/main.css"> -->
  <script src="./js/user-account.js" defer></script>
  <title>Title</title>
</head>

<body>

  <user-account api="/accounts"></user-account>

</body>

</html>

4

2 に答える 2