榆树自定义元素

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 documentation for custom elements，显然您应该将connectedCallback方法更改为attributeChangedCallback。原因是 Elm 使用虚拟 DOM 并在模型更改时进行最少的实际 DOM 更新。特别是，当计数发生变化时，它不会从 DOM 中删除自定义元素并添加一个新元素，它只会更改相应的属性。因此，您的 connecedCallback 似乎不会被调用，但 attributeChangedCallback 应该被调用。

此外，正如@Murdock 正确观察到的（通过阅读 MDN 文章，特别是 "Using the lifecycle callbacks" 部分，比我更好），必须明确设置 data-count 属性才能被观察到，通过使用observedAttributesgetter，如下：

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

榆树自定义元素

ELM Custom Elements

elm

custom-element