自定义元素在编译后在IE 11中不起作用

问题描述 投票：0回答：1

我创建了一个可重用的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标签而被调用。但是我真的很想知道还有什么可以解决的方法。我在document-register-element的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页面polyfill/document-register-element，我已在此文件中要求documentation。 class CustomEl extends HTMLElement被编译，并且在文件中没有任何语法错误或任何类型的错误。但是由于HTML标记仍是<custom-el>来调用实现，因此不会被调用，因为IE浏览器引擎无法识别该元素。

javascript ecmascript-6 web-component custom-element polyfills
1个回答
0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.