‹content› внутри тега привязки не переключает курсор при наведении

Мне нужно было указать, что это вопрос о полимерах, а не собственный HTML.

У меня есть такой шаблон

<template>
  <a href="{{ href }}">
    <content></content>
  </a>
</template>

Когда я наводил курсор на пользовательский элемент, мой курсор был cursor:text, а не cursor:pointer, это легко исправить, чтобы применить указатель курсора, но я чувствую, что такие свойства должны быть унаследованы. Есть ли способ применить content и правильно наследовать свойства a?

Пример jsfiddle здесь

Обновление: 1

Еще большая проблема заключается в том, что вы не можете щелкнуть правой кнопкой мыши и выбрать ссылку для копирования.

Обновление: 2

Кажется, теперь я понял, <content> не передается высота или ширина, поэтому самый внешний элемент (пользовательский) имеет высоту 0, ширину 0. Таким образом, привязке нет места для расширения. Следовательно, курсор не переключается.

пробовал, не повезло

::content * {
  width:inherit;
  height:inherit;
}

Обновление 3

Это вроде сработало.

Мне пришлось поставить привязку id=anchor и использовать jQuery.

$(this.$.anchor).append($(this).html());

По какой-то причине это не импортирует значки с потрясающими шрифтами, а где.

Возможно, это потому, что он не импортирует стили, когда я беру HTML?

В консоли тоже нет ошибок.

Я сбросил шрифт font-awesome в полимерном шаблоне, и это сработало, что довольно паршиво. Нужно лучшее решение.


html web-component polymer
person ThomasReggi    schedule 13.08.2014    source источник
comment
<content> не является допустимым тегом.   -  person isherwood    schedule 14.08.2014
comment
Что ж, у вас нет контента, на который можно было бы навести курсор; тег пустой (и не закрытый). Попробуйте добавить что-нибудь в <content>: jsfiddle.net/cfalk/y8js701t   -  person Casey Falk    schedule 14.08.2014
comment
@isherwood: стиль hover по-прежнему должен применяться в большинстве браузеров, даже если это недопустимый тег. Если вы не имеете в виду, что OP не заканчивает тег - в этом случае вы совершенно правы.   -  person Casey Falk    schedule 14.08.2014
comment
@CaseyFalk У меня была опечатка, я не закрыл тег <content>. Но это не включило указатель курсора.   -  person ThomasReggi    schedule 14.08.2014
comment
@ThomasReggi: Не из чего сделать ссылку - что именно должно иметь cursor:pointer? Все, что вы связываете, это пустой тег.   -  person Casey Falk    schedule 14.08.2014
comment
@isherwood в мире полимерных и веб-компонентов.   -  person ThomasReggi    schedule 14.08.2014
comment
Chrome даже не будет отображать его. jsfiddle.net/isherwood/n4y51zk6   -  person isherwood    schedule 14.08.2014
comment
@isherwood: Chrome не отображает шаблон, потому что вы никогда не используете его в Fiddle. Он отображает <content> нормально; см. JSFiddle в моем первом комментарии. :) (Подробнее: html5rocks.com/en/tutorials/webcomponents/template)   -  person Casey Falk    schedule 14.08.2014
comment
Вы правы. Вы должны поместить свой ответ в ответ. :-)   -  person isherwood    schedule 14.08.2014
comment
Вот пример jsfiddle.net/qgso0onu/1 вот пример, где ссылка работает, но курсор не не менять fiddle.jshell.net/qgso0onu/1/show   -  person ThomasReggi    schedule 14.08.2014
comment
Если вы не возражаете, что не сможете выделить или щелкнуть материал за a, вы можете попробовать переместить content за пределы a, а затем применить атрибуты layout fit к <a>.   -  person Plato    schedule 14.08.2014
comment
Не имеет отношения, но ваш закрывающий тег <polymer-element> должен идти после закрывающего тега </script>, а не после использования вами элемента. И вам не нужно shim-shadowdom в вашем теге стиля внутри <polymer-element>. Однако не уверен, почему вы видите эту проблему. Я даже пытался применить display: inline-block; к <anchor-query>, <a> и <content> (fiddle.jshell.net/dg3fry4q ) но это не помогло.   -  person CletusW    schedule 15.08.2014
comment
Похоже, это ошибка в родном Shadow DOM (не имеющая отношения к Polymer). Этот jsbin демонстрирует такое же поведение без полифилов Polymer или platform.js. в Хроме 36.   -  person CletusW    schedule 15.08.2014
comment
Я задал этот вопрос на на форуме разработчиков полимеров. .   -  person CletusW    schedule 15.08.2014

Ответы (3)


arrow_upward
2
arrow_downward

Это ошибка текущей реализации Shadow DOM в Chrome, которая быть исправлено в Chrome 37.

person CletusW    schedule 15.08.2014

arrow_upward
0
arrow_downward

Вам не из чего сделать ссылку; вы «связываете» пустой блок.

Если вы дадите <content> немного внутренностей, вы увидите унаследованный стиль:

<template>
  <a href="{{ href }}">
    <content> Here is a link. </content>
  </a>
</template>

Пример скрипта

person Casey Falk    schedule 13.08.2014
comment
Polymer использует <content>, чтобы взять внутренности пользовательского элемента и поместить его в элемент. В опубликованном мной jsfiddle вы можете увидеть тег img в пользовательском элементе, и он импортируется через тег <content> в файле <template>. Он просто не наследует родительский курсор <a>, потому что на самом деле он не вложен в него. - person ThomasReggi; 14.08.2014
comment
Таким образом, родительского тега привязки нет. Является ли это неправильным использованием Polymer? - person isherwood; 14.08.2014
comment
@ThomasReggi: Обновление ... Не знал, что проблема связана с Polymer, поскольку она никогда не упоминается в вопросе (и только дискретно в тегах). Виноват. - person Casey Falk; 14.08.2014
comment
Не проблема! Спасибо, что попробовали @CaseyFalk! - person ThomasReggi; 14.08.2014
comment
Все еще ищу ... Судя по Devtools, похоже, что Chrome вообще не применяет шаблоны Polymer, но вместо этого ссылка работает, потому что атрибут href установлен для anchor-query. - person Casey Falk; 14.08.2014

arrow_upward
0
arrow_downward

Я понятия не имею, как вы на самом деле используете этот элемент, но http://jsbin.com/qaqigizajuvi/1/edit — это простой пример того, как заставить работать хотя бы то, чего, как я думаю, вы пытаетесь достичь.

Если вы используете макросы {{ name }}, вам нужно объявить атрибуты для каждого имени, которое вы используете. Также нет смысла в блоке <content>, если вам нужен только текст ссылки: используйте макрос другого атрибута в своем определении:

<polymer-element name="monkey-test" attributes="href label" noscript>
  <template>
    <a href="{{ href }}">{{ label }}</a>
  </template>
</polymer-element>

а затем создайте его как:

<monkey-test href="http://example.org" label="tadah"></monkey-test>

или настройте элемент <monkey-test>, а затем установите его атрибуты href и label через JavaScript, используя e.href=... и e.label=... или e.setAttribute(name, value)

обратите внимание, что здесь используется атрибут noscript, потому что нет явного блока скрипта с вызовом new Polymer('monkey-test', { ... }). Если нам нужен более сложный элемент, нам не обойтись без noscript.

person Mike 'Pomax' Kamermans    schedule 14.08.2014
comment
Это не помогает. Я не хочу просто текст ссылки. Мне нужна такая же поддержка, как у тегов <a>. Отбросьте дочерний элемент <img> или любой другой элемент. Созданный мной компонент принимает любое количество переменных атрибутов, поэтому я не могу передать их в attributes. Это не должно конфликтовать с <content> в пользовательском элементе. Я опубликовал то, что у меня есть здесь, хотя ошибка все еще существует. github.com/reggi/polymer-anchor-query - person ThomasReggi; 14.08.2014
comment
Интересно. Похоже на ошибку в Polymer, о которой стоит сообщить по адресу github.com/polymer/customelements/issues. (jsbin.com/qaqigizajuvi/2/edit служит минимальным примером ошибки) - person Mike 'Pomax' Kamermans; 14.08.2014
comment
Вот еще более сокращенный тестовый пример, который показывает, как текст в Shadow DOM получает связаны даже в том же теге <a>. - person CletusW; 15.08.2014