JavascriptWeb組件-添加子項

class Table extends HTMLElement {
  // attributes
  constructor() {
    super();
    this.name = 'undefined';
    this.icon = 'bi-patch-question';
  }

  // component attributes
  static get observedAttributes() {
    return ['name', 'icon', 'properties'];
  }

  // attribute change
  attributeChangedCallback(property, oldValue, newValue) {
    if (oldValue == newValue) return;
    this[ property ] = newValue;
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });

    shadow.innerHTML = `
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <div >
    <table >
      <tr>
          <caption>${this.name}<i hljs-subst">${this.icon}"></i></caption>
      </tr>
      <!-- here should be the em-tds -->
    </table></div>
    
    <style>
    .card {
      border: 1px solid lightgray;
      border-radius: 15px;
      margin: 10px 0;
      padding: 15px;
    }
  
    table {
        width: 100%;
        border-collapse: collapse;
    }

    tr {
      border-top: 1px solid lightgrey;
    }

    tr:first-child {
      border: none;
    }

    td {
      width: 100%;
      padding: 7px;
      font-size: 18px;
      vertical-align: middle;
    }

    caption {
        position: relative;
        font-family: ExtraBold;
        padding: 7px;
        margin-bottom: 5px;
        text-align: left;
        font-size: 18px;
        text-decoration: 2px underline;
    }

    caption i {
      position: absolute;
      right: 6px;
      font-size: 22px;
    }
    </style>
    `
  }
}

class TableTds extends HTMLElement {
  // attributes
  constructor() {
    super();
    this.name = 'undefined';
    this.value = 'undefined';
  }

  // component attributes
  static get observedAttributes() {
    return ['name', 'value'];
  }

  // attribute change
  attributeChangedCallback(property, oldValue, newValue) {
    if (oldValue == newValue) return;
    this[ property ] = newValue;
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: 'open' });

    shadow.innerHTML = `
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <td>${this.name}</td>
    <td>${this.value}></td>
    `
  }
}




customElements.define('em-table', Table);
customElements.define('em-td', TableTds);

<em-table name="test">
  <em-td name="test" value="10"></em-td>
  <em-td name="test" value="10"></em-td>
</em-table>

我正在為我的平臺開發新的網路組件并遇到某種問題。創建 Web 組件對我來說很好，但我想在 Web 組件的標簽內創建子組件。顯然這沒有奏效，因為該組件受到保護，不受其他一切影響......

在我的例子中，它是關于一個表格 web 組件，我希望將 html-tds 作為子組件，以便以后正確使用它們。

我試過使用插槽，但沒有奏效......

uj5u.com熱心網友回復：

這應該可以幫助您入門，您需要自己添加更多內容。

要點是不要將所有內容都包裝在 shadowDOM 中，
讓您em-td找到它們的“表”，而不必通過以下方式穿透shadowroot邊界
：

    connectedCallback() {
      this.closest("em-table")
          .shadowRoot
          .querySelector("table")
          .append(this.tr);
    }

作業片段：

注意：在這里使用宣告性shadowDOM 。如果您不想從 SSR/HTML 開始， 可以將其全部移至其<template shadowroot="open">em-table
constructor

<em-table name="test">
  <template shadowroot="open">
    <div class="card">
      <table class="table">
        <caption></caption>
      </table>
    </div>
    <style>
      tr{background:pink}
    </style>
  </template>
  <em-td name="test1" value="10"></em-td>
  <em-td name="test2" value="20"></em-td>
</em-table>
<script>
  customElements.define('em-table', class extends HTMLElement {
    caption(name, icon) {
      let html = `${name}<i hljs-subst">${icon}"></i>`;
      this.shadowRoot.querySelector("caption").innerHTML = html;
    }
    connectedCallback() {
      this.caption('caption', 'bi-patch-question');
    }
    static get observedAttributes() {
      return ['name', 'icon', 'properties'];
    }
    attributeChangedCallback(property, oldValue, newValue) {
      if (oldValue == newValue) return;
      this[property] = newValue;
    }
  });
  customElements.define('em-td', class extends HTMLElement {
    static get observedAttributes() {
      return ['name', 'value'];
    }
    constructor() {
      super();
      this.tr = document.createElement("tr");
      this._name = document.createElement("td");
      this._value = document.createElement("td");
      this.tr.append(this._name, this._value);
    }
    attributeChangedCallback(property, oldValue, newValue) {
      if (oldValue == newValue) return;
      this[property] = newValue;
    }
    set name(v) {
      this._name.innerText = v;
    }
    set value(v) {
      this._value.innerText = v;
    }
    connectedCallback() {
      this.closest("em-table")
          .shadowRoot.querySelector("table")
          .append(this.tr);
    }
  });
</script>

請注意：

從<TR>MDN 上的檔案：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr

允許的父母

<table>（僅當表格沒有子<tbody>元素時，甚至只有在任何<caption>、<colgroup>和<thead> 元素之后）；否則，父母必須是<thead>，<tbody>或 <tfoot>

所以

<em-table>
  <tr>

不是有效的HTML

標籤：javascript 网络组件

上一篇：是否會在任何型別的音頻停止時呼叫“暫停”事件？

下一篇：使用來自另一個頁面的url呼叫javascript函式（帶引數）的最佳（和安全）方法