ELM自定义元素

Question

我有以下ELM视图元素：

Html.node "test-elem" 
 [ Attributes.attribute "data-count" (model.count |> String.fromInt) ]
 []

test-elem是一个自定义html元素：

 constructor() {
        super();
        this.me = this;
    }
    connectedCallback() {
        console.info(this.dataset.count);
        this.div = document.createElement("div");
        this.appendChild(this.div);
        this.div.innerText = "" + this.dataset.count;
    }

   attributeChangedCallback() {
        console.info(this.dataset.count);

        this.div.innerText = "" + this.dataset.count;
    }

如果model.count更改，则不会重新生成自定义元素。我该如何强制？

https://ellie-app.com/6SRrZjCzwfra1

编辑来自@Robin的建议，但没有运气。

Answer 1

我没有看到您的Elm代码有任何问题，我认为这与JavaScript中的自定义元素定义有关。

我不熟悉自定义元素API，但查看了您的代码（如下所示）：

customElements.define('test-elem', class TestElem extends HTMLElement {

        constructor() {
            super();
            this.me = this;
        }
        connectedCallback() {
            console.info(this.dataset.count);
            var div = document.createElement("div");
            this.appendChild(div);
            div.innerText = "" + this.dataset.count;
        }
    });

以及自定义元素的MDN文档，很明显，您应该将connectedCallback方法更改为attributeChangedCallback。原因是Elm使用虚拟DOM并在模型更改时使最少的实际DOM更新成为可能。特别是，当计数更改时，它不会从DOM中删除自定义元素并添加新元素，它只会更改适当的属性。因此，似乎connecedCallback不会呼叫您，但attributeChangedCallback应该呼叫您。

另外，正如正确观察到@Murdock一样（通过阅读MDN文章，特别是“使用生命周期回调”这一节比我更好），data-count必须使用observedAttributesgetter 将属性显式设置为要观察，如下所示：

static get observedAttributes() {
    return ['data-count'];
}