防止第三方更改DOM时我的Elm应用程序崩溃

我有一个Elm应用程序。不久前，我意识到，当我使用令人敬畏的图标时，我的应用程序在本地崩溃。我开始明白这是因为我选择了SVG图标，因此我修改了DOM。这与Elm的VDOM机制相冲突

这很容易修复——我迁移到了使用伪元素的CSS版本的FontAwesome。最近，一些用户抱怨该应用程序在生产中冻结，他们显示了与我的日志数据不匹配的州的屏幕截图。过了一段时间，我才意识到所有这些用户都有谷歌翻译自动为他们翻译页面，所以我对它使Elm崩溃并不感到惊讶

---

如何防止我的Elm应用程序崩溃？如果第三方更改了DOM，是否有办法得到通知？因此，我甚至可以通知用户他们有一个干扰应用程序的扩展。

我不知道如何防止崩溃，但我认为您应该能够通过注册来注册对DOM的更改

---

在此之前，还有一些类似于

domsubtreemedited

的方法也可能有所帮助，但它们已被弃用。

我遇到了与您相同的问题，并通过迁移到库中解决了它。基本上，您只需替换以下语法：

i [ Svga.class "fas fa-check" ] []

关于这一点：

Icon.viewIcon Icon.check

---

您可以查看示例项目以了解更多详细信息：

此问题与Elm中的Google Maps或Google Places Autocomplete问题密切相关。我过去使用的解决方案是提供一个无子女的div，该div具有一个我可以从JavaScript指向的id

因为div没有孩子，Elm不会在引擎盖下检查它是否内部发生了变化

查看这个或谷歌“地图在榆树”的指示如何做到这一点

--编辑-- 我对这个问题读得更好，这可能不适用于谷歌翻译问题，因为它会改变整个DOM中的所有文本。我将把它放在这里，以防这个问题给那些在第三方更改DOM时遇到更常见问题的人带来麻烦，请看这里-

他们的方法是使用下面的函数劫持Elm在dom更新期间调用的Elm

replaceData

方法。您可以在授予Elm对dom的控制权之前运行此命令

HTMLFontElement.prototype.replaceData =
  function replaceData(_0, _1, string) {
    this.parentNode.replaceChild(
      document.createTextNode(string),
      this
    );
  };

显然，“GoogleTranslate将DOM中的每个文本节点替换为一个至少包含一个以上标记的标记——每个句子一个”。例如：

<span>Insurello. Rätt ersättning till alla</span>

Insurello。直到阿拉

翻译成

Insurello。对每个人的正确补偿

---

此方法避免了试图编辑跨度，而是将其替换为新的跨度。添加节点后，Google Translate将翻译该文本。

我的直接想法是看看React Thank@SimonH，有用的资源会发生什么。遵循该线程。我用同样的问题创建了一个。这将通知您所有的更改，包括Elm本身修改DOM，而不仅仅是第三方所做的更改。除非你能以某种方式过滤掉Elm所做的更改，否则这是行不通的。嗨！欢迎来到SO！是的，这听起来是让Elm和SVG图标协同工作的另一种方式，但我真正感兴趣的是如何处理这类问题。谢谢！我刚刚在Elm的时事通讯中也看到了这一点，它对Google Translate确实很有效。