Polymer <a> 内の <content> は Chrome ではリンクにならない

リンクテキストの右側にアイコンを付けるだけのコンポーネントがあるとします。

view plainprint?

1. <link rel="import" href="../core-icon/core-icon.html">  
2.   
3. <polymer-element name="icon-link" attributes="href">  
4.   <template>  
5.     <style>  
6.     a {  
7.       color: #0277bd;  
8.       text-decoration: none;  
9.     }  
10.     </style>  
11.   
12.     <p>  
13.       <a href="{{href}}" target="new">  
14.         <content></content>  
15.         <core-icon icon="launch"></core-icon>  
16.       </a>  
17.     </p>  
18.   
19.   </template>  
20.   <script>  
21.     Polymer({  
22.     });  
23.   </script>  
24. </polymer-element>  

<link rel="import" href="../core-icon/core-icon.html"> <polymer-element name="icon-link" attributes="href"> <template> <style> a { color: #0277bd; text-decoration: none; } </style> <p> <a href="{{href}}" target="new"> <content></content> <core-icon icon="launch"></core-icon> </a> </p> </template> <script> Polymer({ }); </script> </polymer-element> これを、こんな感じで使うと

view plainprint?

1. <icon-link href="http://y-anz-m.blogspot.com">Y.A.Mの雑記帳</icon-link>  

<icon-link href="http://y-anz-m.blogspot.com">Y.A.Mの雑記帳</icon-link> Chrome（Version 36.0.1985.125）では <content></content> に挿入される文字がリンクになりません。




一方、Firefox（31.0）ではリンクになります。





次のように <content> ではなく、attributes を使うと Chrome でも文字部分がリンクになります。

view plainprint?

1. <link rel="import" href="../core-icon/core-icon.html">  
2.   
3. <polymer-element name="icon-link" attributes="href label">  
4.   <template>  
5.     <style>  
6.     a {  
7.       color: #0277bd;  
8.       text-decoration: none;  
9.     }  
10.     </style>  
11.   
12.     <p>  
13.       <a href="{{href}}" target="new">  
14.         {{label}}  
15.         <core-icon icon="launch"></core-icon>  
16.       </a>  
17.     </p>  
18.   
19.   </template>  
20.   <script>  
21.     Polymer({  
22.     });  
23.   </script>  
24. </polymer-element>  

<link rel="import" href="../core-icon/core-icon.html"> <polymer-element name="icon-link" attributes="href label"> <template> <style> a { color: #0277bd; text-decoration: none; } </style> <p> <a href="{{href}}" target="new"> {{label}} <core-icon icon="launch"></core-icon> </a> </p> </template> <script> Polymer({ }); </script> </polymer-element>

view plainprint?

1. <icon-link href="http://y-anz-m.blogspot.com" label="Y.A.Mの雑記帳"></icon-link>  

<icon-link href="http://y-anz-m.blogspot.com" label="Y.A.Mの雑記帳"></icon-link>


Web Components に詳しくないので、よくわからないのですが Chrome の挙動は仕様通りなのかしら？


追記：実際に見れるリンクないの？と言われたのでつくりました。http://www.yanzm.net/sample1.html

追記2：Chrome 38（Chrome Canary）だと直っているそうだ。

追記3：以下のように<span>で囲むと Chrome 36 でもリンクとして動作する。

view plainprint?

1. <icon-link href="http://y-anz-m.blogspot.com"><span>Y.A.Mの雑記帳</span></icon-link>  

<icon-link href="http://y-anz-m.blogspot.com"><span>Y.A.Mの雑記帳</span></icon-link> しかし、マウスカーソルの形はホバーしても変わらない。。。たぶん、https://code.google.com/p/chromium/issues/detail?id=314488 の問題。