tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning開発のGlobalIDとCSSについて

CSSにはIDを指定する方法やclassを指定する方法など、対象を指定する方法が複数あります。Lightning Componentを開発するときも.THISをつけることで対象IDにスタイルを指定することが可能です。

f:id:tyoshikawa1106:20150707221911p:plain

f:id:tyoshikawa1106:20150707221920p:plain

f:id:tyoshikawa1106:20150707221931p:plain:w300


ただし、aura:idのようなLocalIDと違い通常のID属性を指定する方法は他のコンポーネントにも影響を与えてしまう可能性があります。たとえば2つ設置するとこんな感じ。

f:id:tyoshikawa1106:20150707222609p:plain


このような状況を回避するためにGlobalIDという仕組みが用意されています。

f:id:tyoshikawa1106:20150707222654p:plain


これで他の一意のIDとして扱えるようになります。

f:id:tyoshikawa1106:20150707222856p:plain


JavaScript側ではこの仕組みで他のコンポーネントへの影響を回避できるのですが、CSSの方ではGlobalIDが追加されたことにより、スタイルが適用されなくなってしまいます。

f:id:tyoshikawa1106:20150707223050p:plain


簡単に検索してみたところ、CSS側でGlobalIDの値を呼び出したりする方法は無さそうでした。GlobalIDは固定値ではなかったと思うので、Lightning Componentを開発するときは、CSSで#IDというようにID指定の書き方はしないほうが良さそうです。


ちなみにLocalIDの方ですが、IDという名前はついていますが、HTMLタグのID属性にはならないので、スタイル指定には利用できないと思います。(JavaScript側で要素を識別するのに使用します。)