tag:blogger.com,1999:blog-5859951453664122203.post7195337248225506917..comments2024-03-15T04:29:35.682+09:00Comments on Y.A.M の 雑記帳: Polymer 内の は Chrome ではリンクにならないyanzmhttp://www.blogger.com/profile/04059587494895790858noreply@blogger.comBlogger2125tag:blogger.com,1999:blog-5859951453664122203.post-31681362070530635062014-07-23T14:07:41.076+09:002014-07-23T14:07:41.076+09:00Chrome Canary だと直ってましたね。
見当違いのコメント申し訳ないです。Chrome Canary だと直ってましたね。<br />見当違いのコメント申し訳ないです。Anonymoushttps://www.blogger.com/profile/03254878632139120412noreply@blogger.comtag:blogger.com,1999:blog-5859951453664122203.post-87532887343213954712014-07-23T14:00:48.619+09:002014-07-23T14:00:48.619+09:00仕様は確認し切れていませんが、Chrome のほうが正しい動作という気がします。
以下、推測混じりに...仕様は確認し切れていませんが、Chrome のほうが正しい動作という気がします。<br />以下、推測混じりになってしまいますが...<br /><br /><icon-link> の子ノードは、 ShadowDOM の外に配置されているノードです。<br /><content> 要素を用いても、外にあるノードだという事実は変化しません。<br /><br />ShadowDOM 内部のスタイルやリンク等は ShadowDOM 境界を越えて出て行かないので、<icon-link> の子ノードには適用されないと考えられます。<br />(<content>要素でひっぱってきた子ノードに ShadowDOM の中からスタイルを適用するには、 ::content 疑似要素を使います。リンクには ::content 疑似要素に相当するものが無いと思います)<br /><br />他方で label 属性にした場合ですが、 DataBinding を用いて文字列を直接 ShadowDOM の中に埋め込んでいるので、リンクが適用されます。<br /><br />Firefox で <content> 要素と子ノードの組み合わせがリンクになるのは、 Polyfill では ShadowDOM 境界を技術的に再現できないためだと考えられます。<br /><br /><br />この例の場合、解決方法は3種類ありそうです。<br />1. 子ノードを使わず、文字列を属性で指定する。<br />2. <a> 要素を拡張した <a is="icon-link"> というカスタム要素を定義する。<br />3. カスタム要素内で MutationObserver を利用して自身の子ノードを監視し、 ShadowDOM 内に転写する。Anonymoushttps://www.blogger.com/profile/03254878632139120412noreply@blogger.com