Polymerで作ったWeb Componentで string 型以外の属性を使う場合のTIPS

先日 Web Components に関して、 @aggre さんの “Web Componentsだけ” で新サービスを実装して見えたこと という記事が投稿されました。
これすごい良い内容なんで、ぜひ読んで欲しいです。

で、そのサービス Double O に以下のような質問が入っていました(質問したのは私ではないです)。

まだ埋め込み対応はされていないので、画像で貼り付けます。
Polymerは使わないんですか?

「Polymerは使わないんですか?」実際のページ

良い質問と回答だなーと。

でもちょっとコメントしたい

string 型以外の属性( attributes )を渡せるかどうか?になると思います。ドメイン依存の排除を考えるとそもそも string 型以外を渡すシチュエーションは避けるべきなので、結果的に Polymer を使う必然性がなくなった

その通りなのですが、では Polymer で Web Component 作って公開するとき string 型じゃない属性はどうやって使うの?
Polymer で Custom Element 作ったらアプリも Polymer で作らないといけないの?

と、不安になる人がいるのではないか?と思ったのです。

安心してください、それ使えますよ!

どうやって使うか?

では、非Polymerドメインから、Polymerで作ったWeb Componentのstring型ではない属性に対して、どうやって値を渡すか?
答えは、公式ドキュメント:Attribute deserializationに書いてあります。
日本語訳:属性のデシリアライズもあります。

簡単な例

string 型以外の簡単な例を紹介します。

boolean

Polymerでbooleanとして定義されている属性 manager があるとき、 Scott さんは managerBob さんは 非managerということになります。
booleanのときは属性名を書くか、書かないかでboolean値がtrueもしくはfalseになります。

<x-custom user="Scott" manager></x-custom>
<x-custom user="Bob"></x-custom>

array or object

配列やJSONオブジェクトとして定義されている属性があるときは、 JSON.stringify した結果の文字列として指定すると、自動的にPolymer側でarrayまたはobjectに変換されます。

<my-element book='{ "title": "Persuasion", "author": "Austen" }'></my-element>
<my-element colors='["red", "green", "blue"]'></my-element>

さいごに

Web Components をはじめるのにフレームワークを使わないのもアリなんですが、最初の取り掛かりとして Polymer のようなライブラリ(フレームワーク)を使うと簡単に始められると思います。

コミュニティ活動も活発に行なっていますので、ぜひ参加ください。
詳しくはPolymer Japan サイトのコミュニティページをご覧ください。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.