Question

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

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

预期行为：一个样式按钮，另一个按钮没有样式但是，使用其他浏览器从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封装的概念。有人能帮助我吗？

提前致谢

AngularDart组件Shadow Dom CSS封装仅适用于Dartium

0 个答案: