![](/img/trans.png)
[英]Javascript Web-Components - Add function to the shadow-DOM
[英]Javascript Web-Components - add subitems
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/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <div class="card"> <table class="table"> <tr> <caption>${this.name}<i class="bi ${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/bootstrap-icons@1.8.1/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>
我正在為我的平台開發新的網絡組件,但遇到了一些問題。 創建網絡組件對我來說很好,但我想在網絡組件的標簽內創建子組件。 顯然這沒有用,因為該組件受到保護免受其他一切影響......
在我的例子中,它是關於一個表格網絡組件,我想在其中將 html-tds 作為子組件,以便稍后正確使用它們。
我試過使用插槽,但沒有奏效......
這應該讓你開始,你需要自己添加更多。
要點是不要將所有內容都包裝在 shadowDOM 中,
讓你的em-td
找到他們的“桌子”,而不必穿過shadowroot邊界
和:
connectedCallback() {
this.closest("em-table")
.shadowRoot
.querySelector("table")
.append(this.tr);
}
注意:這里為em-table
使用聲明式 shadowDOM <template shadowroot="open">
。
如果你不想從 SSR/HTML 開始,你可以將它全部移動到它的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 class="bi ${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>
來自 MDN 上的<TR>
文檔:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr
允許的父母
<table>
(僅當表沒有子<tbody>
元素時,甚至僅在任何<caption>
、<colgroup>
和<thead>
元素之后); 否則,父級必須是<thead>
、<tbody>
或<tfoot>
所以
<em-table>
<tr>
無效HTML
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.