Componentsが作れるようになっているようですね。Componentsを生成できます。試しにちょっとしたミニゲームを含めたサンプルを作ってみましたので実際にどのように作成できるのかを解説してみます。今回はvue-cli3で作成したプロジェクトで実装しています。下記のようなものを作りました。これは何かというと、よくWebサイトのお問い合わせフォームなどに「私はロボットではありません」のようなチェックを入れないと送信できない機能がありますが、あれです。画像の下にあるのは単なるSubmitボタンで、上部画像はよくある一般的な15パズルです。15パズルを解かないとSubmitボタンが有効にならないようになっています。引き続き解説していきますが、記事の最後に動かせるGitHubページへのリンクがあるので読むのが面倒な方がいれば、僕は全然気にしませんのでそちらを見てしまってください(泣きながら)普通のVue.jsのコンポーネントと何が違うの?普通のVue.jsのコンポーネントであればHTMLは下記のようになっていると思います。src="/img.png"></puzzle-button></div>id="app"のdivでVueコンポーネントを動作させる形ですね。Componentsは自分で独自タグを定義するものなので、このdivが不要になります。src="/img.png"></puzzle-button>どうやるの?今はもうVueに@vue/web-component-wrapperというものが含まれているため、基本的にはそれを使うだけです。vue-cliを使う前提で作られているようですが、直接webpackでも可能なようです。Componentsを生成してそれを登録するだけになります。PuzzleButton));これだけでpuzzle-buttonタグが使えるようになります。通常のVue.jsによる開発と違う点いくつかちょっと通常のVue.jsによる開発方法とは違う点があるため、解説してきます。プロパティの型Vue.jsのコンポーネントの場合、プロパティに型が指定されている場合は下記のようにしてbindする必要があります。:value="100000"></calc>上記のような感じで、valueがNumberの場合はbindして直接数値を指定してあげる必要があります。CompoentsはVue.jsの構文とは関係がないため、コロンを付けてbindすることはできません。普通に属性を指定するだけになります。value="100000"></calc>前述した@vue/web-component-wrapperのREADMEにも書かれていますが、ちゃんとプロパティの定義に型が指定されていれば、コンポーネント内ではその型の値として初期化され使用することができるようになっています。CSSの定義Vue.jsではvueファイル内にてCSSを定義することができます。ComponentsのDOM内を大元の呼び出し元のDOMと隔離することができるようになっています。これによりscopedの有無に関わらず、vueファイル内で定義したCSSが反映されなくなってしまいます。いうとこのstyleタグが呼び出し元のHTMLのhead内に挿入されるためです。DOMの内側に挿入されるように設定して上げる必要があります。}}serveしてホットロードする時は問題ないのですが、productionビルドの時はちょっとCSSのビルド方法が変わってしまうためエラーになります。そのため、VUE_CLI_CSS_SHADOW_MODEという環境変数をtrueにしてビルドする必要があります。僕はcross-envを使ったので、同じようにするのであればまずcross-envをインストールします。cross-envあとはpackage.jsonのbuildのscriptsにcross-envの記述を追加します。},これでbuildも正常にできるようになります。成果物ソースはGitHubに公開してあります。GitHub動かせるサンプルもあります。polyfillは入れていませんので、対応しているブラウザで試す必要があります。僕はChromeとかAndroidとかでは確認できました。Componentsは細かいパーツとか機能を使い回すのに非常に適していると思いました。ビルドして配布すれば、誰でも読み込んでタグを設定するだけでその機能を利用することができます。Componentsに置き換えられていく可能性もありそうです。設置も非常に楽ですし、プロパティで自然に設定できるのでわざわざscriptを書かなくてもよく直感的ですし。Components開発のフレームワーク的なものはあるようですが、Vueは元々使える人が多いと思うのでそういう意味でも選択肢にあがる可能性は高そうな気がします。Componentsとしてのメリットとは矛盾していそうですが)、色々まだ試してみると面白そうです。ツイッターでシェアみんなに共有、忘れないようにメモだら@Crieit開発者Crieitの開発者です。LAMPで開発しているWebエンジニアです(在宅)。記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。Vue等色々https://torima.appllis.net/users/dala00マシュマロでメッセージか投げ銭?Crieitは個人で開発中です。どんな軽い内容でも嬉しいです。