转换后自定义元素在 IE 11 中不起作用答案

【问题标题】：Custom Element is not working in IE 11 after transpiling转换后自定义元素在 IE 11 中不起作用
【发布时间】：2020-04-27 10:58:09
【问题描述】：

我创建了一个可重用的 Web 组件，为了这个问题，我们称之为<custom-el>。为了调用这个自定义元素的实现，我将它写在我的模板文件中，如下<custom-el class="container-for-custom-tag"></custom-el> 并且在组件中，我将子元素添加到这个标签中。当浏览器引擎发现这个标签时，我的组件被调用并将子组件添加到这个标签中。

为了让它在 IE 11 中工作，我使用了 document-register-element polyfill，它成功地转译了文件。当我加载这个转译文件时，我在 IE 11 中没有收到任何错误。但由于标签在 IE11 中也无法识别，因此 UI 中不会呈现任何内容。我在这里做错了什么？

我也尝试过使用 babel 插件，我得到了相同的结果。该文件被转译，但由于标签的原因，UI 中没有呈现任何内容。

现在，我想到了一个解决方案，可以按需调用 Web 组件，而不是因为 HTML 标记而被调用。但我真的很想知道还有什么可以解决的。我在文档注册元素的 GitHub 页面上看到，他们还在示例中的 HTML 页面中放置了自定义标签，但我不确定它是如何为他们工作的。

这就是我定义自定义元素的方式：

class CustomEl extends HTMLElement {
 // Inside this I render the child elements
 // This HTML gets appended to the custom-el as children: 
 //<div class="text-container">20</div>
 // I m not using shadow root
}
// Here I define the custom element
customElements.define('custom-el', CustomEl);

这就是我调用它的方式：

// The following code goes in the template HTML file
<div class=“wrapper-container”>
 <custom-el id="js-custom-el-conatiner”></custom-el>
<div>

当我在浏览器中加载它时，我在浏览器检查器中得到以下输出：

<div class=“wrapper-container”>
    <custom-el id="js-custom-el-conatiner” >
         <div class="text-container">20</div>
    </custom-el>
<div>

对于 IE，我根据 github 页面 documentation 在此文件中需要 polyfill/document-register-element。 class CustomEl extends HTMLElement 被编译，文件中没有任何语法错误或任何类型的错误。但是由于 HTML 标记仍然是调用实现的 <custom-el>，因此它不会被调用，因为 IE 浏览器引擎无法识别该元素。

【问题讨论】：

没人知道答案吗？没有人有任何提示可以解决它吗？
如果可能的话，代码示例会有所帮助吗？你在哪里打电话customElements.define？您如何将内容添加到自定义元素中？你在使用 Shadow DOM 吗？
+1 代码示例；尝试在 JSFiddle、CodePen 等任何东西中重现您的问题。 IE 是一种痛苦，您在 IE 问题上花费了大约 15% 到 20% 的开发时间。
@lamplightdev 我已经添加了代码示例。
嗨 Neha - 我认为小提琴会有所帮助，然后我们可以准确地找出问题所在。您发布的代码中的一件事 - 那里似乎有一些“智能”引号（卷曲的，而不是标准的直的），例如在wrapper-container 类周围。这可能只是一个复制和粘贴问题，但我想如果不是这样也会导致一些问题。

标签： javascript ecmascript-6 web-component custom-element polyfills

【解决方案1】：

这不是 JS 的问题——你已经证明了自定义元素可以完成它的工作并将其放入 DOM。现在，确保您已将 CSS 应用于该元素，基本上告诉浏览器如何呈现它。从基本的display 属性开始。如果没有 JSFiddle 或 CodePen 或任何可玩的东西，很难告诉您确切的问题。大多数情况下，将自定义元素导入 IE11 是个问题，因为它不支持所需的 ES6 结构，并且必须依赖像 https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs 这样的 polyfills。

【讨论】：