web-dev-qa-db-ja.com

カスタム要素がトランスパイリング後にIE 11で機能しない

再利用可能なWebコンポーネントを作成しました。この質問のために、それを<custom-el>。このカスタム要素の実装を呼び出すには、テンプレートファイルに次のように記述します<custom-el class="container-for-custom-tag"></custom-el>およびコンポーネントで、このタグに子を追加しています。ブラウザエンジンがこのタグを見つけると、コンポーネントが呼び出され、このタグに子が追加されます。

IE 11で機能させるために、私はdocument-register-elementポリフィルを使用し、ファイルを正常にトランスパイルしました。IEでエラーは発生しません= 11このトランスパイルされたファイルをロードすると、タグはIE11でも認識されないため、UIには何もレンダリングされません。

Babelプラグインも使用してみましたが、同じ結果が得られます。ファイルは変換されますが、タグが原因でUIに何もレンダリングされません。

これで、HTMLタグが原因で呼び出されるのではなく、オンデマンドでWebコンポーネントを呼び出すソリューションが考えられます。しかし、私が本当に知りたいのは、それを解決するために他にできることが何かあるかどうかです。 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の場合、polyfill/document-register-elementinこのファイルはgithubページ documentation のとおりです。 class CustomEl extends HTMLElementがコンパイルされ、構文エラーやファイルのエラーは発生しません。しかし、HTMLタグはまだ<custom-el>は実装を呼び出しますが、その要素はIEブラウザエンジンで認識されないため、呼び出されません。

javascriptecmascript-6web-componentcustom-elementpolyfills
3
Neha Choudhary

これはJSの問題ではありません-カスタム要素がその役割を果たし、DOMにすることが証明されました。次に、その要素にCSSを適用していることを確認します。基本的には、ブラウザにレンダリング方法を指示します。基本的なdisplayプロパティから始めます。 JSFiddleやCodePen、またはその他の操作を行わなければ、正確な問題を特定するのは困難です。ほとんどの場合、カスタム要素をIE11に取り込むのは問題です。これは、必要なES6構成をサポートしておらず、 https://github.com/webcomponents/polyfills）のようなポリフィルに依存する必要があるためです。/tree/master/packages/webcomponentsjs

4
crtag