custom-element 相关问题

我创建了一个自定义 HTML 元素，该元素从以下模板创建一个新元素：还没有什么我创建了一个自定义 HTML 元素，它从以下模板创建一个新元素： <template id="track"> <div class="record">Nothing yet</div> </template> 这里是定义自定义元素的JS代码： class Track extends HTMLElement { constructor() { super(); this.template = document.getElementById("track"); this.clone = this.template.content.cloneNode(true); } connectedCallback() { this.append( this.clone ); } set record(html) { // Case 1: Works only for element 1 (before appending to the DOM) this.clone.querySelector('.record').innerHTML = html; // Case 2: Works only for element 2 (after appending to the DOM) //this.querySelector('.record').innerHTML = html; } } customElements.define('my-track', Track); 请注意更改 <div> 的 HTML 内容的记录属性。我希望能够更新元素内容，无论它是否已附加到 DOM。我无法编写在这两种情况下都有效的代码（在将自定义元素附加到 DOM 之前和之后）。以下代码仅适用于情况 1： const el1 = document.createElement('my-track'); el1.record = "Bla<b>bla</b> #1"; document.body.append(el1); 以下代码仅适用于情况2 const el2 = document.createElement('my-track'); document.body.append(el2); el2.record = "Bla<b>bla</b> #2"; 当然，在方法set record()中，我可以检查元素是否已经附加到DOM并相应地切换到情况1或情况2。但我觉得这不是构建自定义元素的正确方法。在方法中更新元素内容的最佳选项是什么set record()无论元素是否已附加到 DOM？我在这里创建一个 JSFiddle：https://jsfiddle.net/Alphonsio/gL8a239o/13/ 当没有 DOM 时，你无法向 DOM 写入任何内容。就像还没有房子的时候，你不能在客厅放沙发一样。这意味着您必须在 this.isConnected 方法中使用 set record 检查该元素是否附加到 DOM。它是 JavaScript 类/对象的实例；您当然可以将任何您想要的东西附加到它并让constructor/attributeChangedCallback/connectedCallback处理它（但要仔细考虑房子/客厅的场景） const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props); customElements.define('my-track', class extends HTMLElement { connectedCallback() { this.append( this.recordDIV = createElement("div", { innerHTML: `Default Record content` })) } set record(html) { if (this.isConnected) this.recordDIV.innerHTML = html; else console.warn(this.id, "Not in the DOM yet") } }); const el1 = createElement('my-track', { id: "el1" }); el1.record = "Record #1"; document.body.append(el1); const el2 = createElement('my-track', { id: "el2" }); document.body.append(el2); el2.record = "Record #2";

javascript custom-element html-templates

回答 1 投票 0

JS CustomElements - 首次实例化时自行“注册”

所以我正在寻找一种为自定义元素设置 ES6“抽象”基类的方法，该基类在子元素的第一次实例化时进行自我注册（window.customElements.define）。我采取的方法...

javascript web-component custom-element

回答 1 投票 0

我应该如何引用角度自定义元素（Web 组件）中的资源

我创建了一个 Web 组件，并从其中引用了我的资产文件夹中的图像如下在本地一切都很好，我发布了我的

javascript angular web-component custom-element

回答 5 投票 0

如何使用影子 DOM 附加样式表根据子节点选择器设置自定义 HTML 元素的样式？

我有一个自定义 HTML 元素，可以对按钮元素进行分组：福酒吧巴兹 &...