Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@jimbo

Vanilla JS や TypeScript で Custom Elements を書く際の注意点

More than 3 years have passed since last update.

Vanilla JS や TypeScript を使って Web Components の Custom Elements を書いてビルドした結果、ブラウザのコンソールに

Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.

というエラーが出ることがあります。

原因

Custom Elements が ES5 形式のコードになってしまっているのが原因です。

仕様では、Custom Elements は ES6 の class 構文である必要があります。しかし、ビルド時に TypeScript や Babel を通すことで、意図せず ES5 形式のコードになってしまっていることがあります。この時、上記のエラーが出ます。

チェックポイント

TypeScript を使っている場合

Compiler Options の --target"ES6" になっているか確認します。

tsconfig.json
{
  "compilerOptions": {
    "target": "ES6"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Babel を使っている場合

Babel でトランスパイルをすると ES5 形式のコードになってしまいますが、babel-plugin-transform-custom-element-classes を併用することで上記のエラーを回避することができます。

{
  "presets": ["env"],
  "plugins": ["transform-custom-element-classes"]
}

ES5 形式のコードをそのまま使いたい場合

ES6 をサポートしていないブラウザも対象にする必要があるなど、ES5 形式のコードをそのまま使いたいというケースもあるかと思います。

この場合、Custom Elements を宣言する前に custom-elements-es5-adapter.js という polyfill を読み込むと、 ES5 形式の Custom Element を正常に動かすことができます。

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
dr-ubie
病気予測AIによる病院向け問診サービス、及び to C 向け病気予測サービスを運営するスタートアップ

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?