Question

我正在尝试将css应用于我的Angular选择器。它适用于第一个，但不适用于下两个。他们都是相同的选择器。

citation.dart

library citation_component;

import 'package:angular/angular.dart';
import 'package:citation/tooltip/tooltip.dart' show TooltipModel;

@Component(
    selector: 'citation',
    template: '<span class="citation-text" tooltip="tooltipForFootnote()">{{citationText}}</span>',
    cssUrl: 'citation.css')

class CitationComponent
{
  @NgAttr('bibliographicEntry')
  int bibliographicEntry;

  @NgAttr('citationText')
  String citationText;

  // Set up the decorator
  static final tooltip = new Expando<TooltipModel>();

  TooltipModel tooltipForFootnote()
  {
    if (tooltip[this] == null)
    {
      tooltip[this] = new TooltipModel(bibliographicEntry);
    }
    return tooltip[this];
  }
}

citation.css

.citation-text { border-bottom: 1px dashed #808080; }

的index.html

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Citable Prototype</title>
  <link rel="stylesheet" href="style.css">

  <script src="packages/web_components/webcomponents.js"></script>
  <script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<h1>The Blow Family</h1>
<p>Joe Blow born <citation bibliographicEntry="1" citationText="12 Apr 1858">  </citation></p>

<p>Robin Blow born <citation bibliographicEntry="1" citationText="9 Jan 1852">   </citation></p>

<p>This is a long entry to see what happens when the tooltip hits the right side of the page John Blow born <citation bibliographicEntry="2" citationText="13 Dec 1850"></citation></p>

<div style="visibility: hidden;">
  <div id="be1">
    <h2>Citation 1</h2>
    <p>source specification</p>
    <p>additional information</p>
  </div>

  <div id="be2">
    <h2>Citation 2</h2>
    <p>source specification</p>
    <p>additional information</p>
  </div>
</div>

<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

屏幕截图

enter image description here

工具提示装饰器适用于所有三个。

我通常通过虚拟主机条目和Apache服务器为应用程序提供服务。我还尝试运行pub serve并通过http://localhost:8080访问它。我遇到了同样的问题。当我尝试http://localhost:8081时，我收到了404错误。我也尝试过Chromium浏览器。当我尝试直接运行dart代码而不是构建时，我总是得到一个错误日志。我在酒吧服务并在Chromium中尝试了http://localhost:8080。我遇到了同样的问题。

调试输出

这是我在Chromium中检查元素时所看到的。

enter image description here

工作和非工作条目看起来完全相同。很奇怪。仅供参考，我从最初的帖子开始就将css类更改为引用文本。

浏览器测试

我在其他浏览器中尝试过该网站。我不在Chrome和Chromium中工作。它适用于Firefox和Safari。现在它适用于Chrome！在看到Chrome工作之前，我停了下来并重新启动了Chrome。

CSS仅适用于第一个角度选择器