Question

我应该指出这是一个聚合物问题，而不是原生HTML。

我有这样的模板

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

当我将鼠标悬停在自定义元素上时，我的光标为cursor:text而不是cursor:pointer，这是一个应用光标指针的简单修复，但我觉得应该继承这些属性。有没有办法应用content并正确继承属性？

Example on jsfiddle here

更新：1

更大的问题是您无法右键单击并选择复制链接。

更新：2

我觉得我现在得到它，<content>没有传递高度或宽度，所以最外面的元素（自定义元素）是高度0，宽度为0.所以锚没有空间扩大。因此光标没有切换。

尝试过，没有运气

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

更新3

这种方式有效。

我必须给锚点id=anchor并使用jQuery。

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

由于某些原因，这不会导入字体真棒图标。

也许是因为当我抓取HTML时，它不会导入样式？

控制台中也没有错误。

我在聚合物模板中删除了字体 - 真棒，它有效，这有点糟糕。需要更好的解决方案。

Answer 1

This is a bug Chrome目前正在实施Shadow DOM，将在Chrome 37中修复。

Answer 2

你没有任何东西可以建立链接;你正在“链接”一个空块。

如果你给<content>一些内脏，你会看到继承的风格：

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

Example Fiddle

Answer 3

我不知道你是如何使用这个元素的，但http://jsbin.com/qaqigizajuvi/1/edit是一个简单的例子，说明如何至少制作我认为你想要实现的目标。

如果您使用的是{{ name }}宏，则需要为您使用的每个名称声明属性。如果您只想要一个linktext，那么<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>元素，然后使用e.href=...和e.label=...或e.setAttribute(name, value)

通过JavaScript设置其href和标签属性

请注意，此处使用了noscript属性，因为没有带new Polymer('monkey-test', { ... })调用的显式脚本块。如果我们想要一个更复杂的元素，我们就无法使用noscript。

锚标记内的<content>不会在悬停</content>上切换光标

3 个答案: