1

我一直在玩 Angular Dart。我非常喜欢它，但是我遇到了关于组件和 Shadow Dom CSS 封装的问题。

据我所知，组件内部定义的样式应该只适用于 Shadow Root 内部。Chromium 中的一切都按预期工作，但是当我在其他浏览器（甚至 Chrome）中运行我的应用程序时，组件的样式也会应用到 Shadow Root 之外。

预期行为：一个样式按钮和另一个没有样式的按钮 但是，使用其他浏览器运行从 Dart 编辑器生成的 javascript 版本，我得到两个样式按钮。

这是我的主要应用程序代码

import 'package:angular/angular.dart';
import 'mycomponent.dart';
// Temporary, please follow https://github.com/angular/angular.dart/issues/476
@MirrorsUsed(override: '*')
import 'dart:mirrors';

class MyModule extends Module {
  MyModule () {
    type (MyController);
    type (MyComponent);
  }
}

@NgController(
    selector: '[my-controller]',
    publishAs: 'ctrl')
class MyController {
  @NgTwoWay ('something')
  String something;
}

void main() {
  ngBootstrap(modules: [new MyModule ()]);
}

我的主要 CSS 文件是 Dart 编辑器生成的默认 CSS。我只为 ng-cloak 和 #basic-example id 添加了样式（与按钮无关）

body {
  background-color: #F8F8F8;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.2em;
  margin: 15px;
}

h1, p {
  color: #333;
}

#sample_container_id {
  width: 100%;
  height: 400px;
  position: relative;
  border: 1px solid #ccc;
  background-color: #fff;
}

#sample_text_id {
  font-size: 24pt;
  text-align: center;
  margin-top: 140px;
  -webkit-user-select: none;
  user-select: none;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

#basic-example {
  background-color: #dddddd; 
  padding: 20px
}

组件的 dart 代码也很简单：

import 'package:angular/angular.dart';

@NgComponent (
    selector: 'my-component',
    templateUrl: 'mycomponent.html',
    cssUrl: 'mycomponent.css',
    publishAs: 'cmp'
)
class MyComponent {
}

这是组件的 html 模板：

<div>
  <button>I am a button!</button>
</div>

应用程序的主 HTML 只是实例化了组件和另一个不应设置样式的按钮：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>ShadowDomJSBug</title>
    <link rel="stylesheet" href="shadowdomjsbug.css">
  </head>
  <body ng-cloak>
    <div my-controller>

      <!-- [...] -->

      <p>My little component with just one styled button:</p>
      <my-component></my-component>
      <p>The following button should not be styled:</p>
      <button>I should have no styles</button>
    </div>

    <script src="packages/shadow_dom/shadow_dom.min.js"></script>
    <script type="application/dart" src="shadowdomjsbug.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

正如我之前所说，我希望只有一个样式按钮，因为应用于组件的样式不应该应用于外部，但是在从 Dart 编辑器生成的 javascript 版本中，我得到了两个样式按钮。

我正在使用 AngularDart 0.9.10 和 Dart SDK 1.2.0。

难道我做错了什么？也许我不理解 CSS 封装的概念。有谁能够帮我？

提前致谢

4

0 回答 0