Dartlang:如何允许第三方使用模拟封装来设置angular2组件的样式？

Question

mods的免责声明:这并没有要求就最佳方式提出意见,这就要问一个方法,如何解决这个问题.

问题

让我们想象一下,我想为我的项目编写一个材质设计风格按钮组件.(我知道,这已经可以使用,但这仅用于说明目的.)
我将按钮组件设置为正常的dart库项目,它工作正常.现在我想在另一个angular2 app中使用这个材质按钮组件,所以我将它添加到pubspec.yaml并将其作为指令依赖项插入到我的新app-component中.

问题是,如何从外部更改此按钮的悬停颜色？

由于我的组件应该使用样式封装(模拟样式),因此不能简单地全局设置样式.

可能的解决方案

使用自定义CSS属性

这在理论上是好的,然而,它们尚未在所有浏览器中发货,并且没有生产就绪的垫片.为此,有人会在组件内部定义自定义css属性并在外部设置它们的值.

使用输入属性进行可调样式设置

只需为应更改的样式提供我的按钮组件输入属性.这确实有效,但仅适用于那些不包含css伪选择器的样式,例如:hover,因为它无法更改:每个javaScript都悬停样式,因此也不是dart.有人可以在javascript/dart中编写:hover函数来允许这种样式更改,但这看起来很糟糕,因为它只是复制了css引擎中的可用代码.

使用普通的css链接和原生阴影dom

这个适用于本机阴影dom,因为组件内部的样式链接标记由按钮组件的customCssPath属性填充,会将样式正确加载到组件中.但是,由于shadowdom在所有浏览器中都不是原生的,因此我们无法可靠地使用它.所以我们现在被迫使用模拟封装.

Answer 1

解决方案 - 使用SASS(非常感谢Matan Lurey!)

当直接询问Angular2 Repo时,Angular2开发者之一Matan Lurey提供了一些关于如何使用Sass mixins来进行所需样式操作的指南.

可以在这里找到原始主题:https: //github.com/dart-lang/angular2/issues/154

方案细节:

但是,由于我发现实现起来并不是很简单,所以这里有一些关于如何实现这项工作的更多细节:

1. 想象一下,我们有以下文件internal_component.dart:

   import 'package:angular2/angular2.dart';
   
   @Component(
     selector: 'internal-component',
     styleUrls: const ['internal_component.css'],
     templateUrl: 'internal_component.html',
   )
   class InternalComponent {}
   

2. 该组件具有以下模板文件internal_component.html:

   <div>
     Some Text
   </div>
   

3. 这个sass样式文件internal_component.sass:

   div {
     background-color: #ffff00;
   }
   
   @mixin internal-component-background($selector, $color) {
   
     polyfill-unscoped-rule {
       background-color: $color;
       content: '#{$selector} > div'
     }
   }
   

   4. 包含internal-component在其他一些组件中(这里app_component.dart):

      import 'package:angular2/core.dart';
      import 'package:sass_internal_styles/internal_component/internal_component.dart';
      
      @Component(
        selector: 'my-app',
        styleUrls: const ['app_component.css'],
        templateUrl: 'app_component.html',
        directives: const [InternalComponent],
      )
      class AppComponent {}
      

   5. 在模板文件内app_component.html:

      <internal-component id="comp1"></internal-component>
      <internal-component id="comp2"></internal-component>
      

   6. 最后,在`app_component.scss中:

      @import "../lib/internal_component/internal_component.scss";
      @include internal-component-background($selector: '#comp2', $color: red);
      

怎么了:

• 字符串"Some Text"将显示两次,字符串,如图所示internal_component.html,两次显示app_component.html
• 第一个字符串将具有黄色背景,如中所定义internal_component.scss.这可用于定义组件内的默认值!
• 第二个字符串将具有红色背景,由包含的mixin定义app_component.scss.

有一点需要注意:

给mixin的选择器必须出现在使用内部组件的模板内部.在我们的例子中,这是id=comp2里面的属性app_component.html

更新1:另一件需要注意的事情:

使用[attribute] css选择器而不是.class选择器,并注意css选择器强度hirarchy!

通过将属性应用于组件的标记来"规范"常规组件样式,并将此组件的样式仅应用于组件选择器以及作用域的属性.由于elem [attribute] -css规则比简单类选择器具有更多的强度,因此类选择器将不起作用.但是,您可以尝试在类之前指定元素名称来解决此问题.

您还可以将.cl​​ass选择器与!important结合使用.但是,只有在您知道其含义的情况下才能这样做!例如:相同元素的hover选择器将不再正常工作,因为!important优先.

为什么这可行:

该polyfill-unscoped-rule块被编译成

#comp2 > div {
    background-color: red;
}

在app_component.css文件的样式块内.(由于样式表将通过angular2移动到模拟模式下的标题)由于样式封装仅被模拟,因此内部的子选择器div工作正常.

更新1:polyfill-unscoped-rule块编译由webcomponents.js完成!:)

有人可能会争辩说,这个伎俩也可以从外面完成而不用sa.这是正确的,但是,使用mixin技术,组件的用户不需要深入了解组件的内部结构.他可以使用一些不错的Sass mixins,这应该记录在组件的自述文件中.