我尝试将聚合物 Web 组件与飞镖和 Foundation CSS 框架混合在一起，到目前为止，一些简单的东西都在工作，比如按钮、网格、菜单。我想如果我遇到问题，我只需要移植我需要飞镖的 javascript。有人尝试这个或想尝试这个吗？
这是让 CSS 泄漏到组件中的技巧。
class ClickCounter ... {
...
bool get applyAuthorStyles => true;
...
问问题
1285 次
1 回答
0
是的，我也试试这个。我尝试的第一件事是为每个组件创建一个样式文件并使用 sass @extends 来制作每个组件样式，我的目标是抽象 zurb，所以如果我想更改主题或 css 框架，我只需要更改 sass文件。
但是 zurb-foundation 依赖于一个必须包含的基本文件，我不能只为按钮创建一个文件，因为基础中的 de 按钮依赖于在主文件中设置的变量，这会为每个文件生成一个带有冗余 css 的巨大文件零件。
我尝试的第二件事是扭曲基本组件，比如按钮，让我们说
<x-button></x-button>
然后在我的 sass 文件中包含 zurb 按钮文件，并使 x-button @extends .button 或 @include .button 使按钮和 x-button 具有相同的外观。这适用于基本元素。
另一种方法是 applyAuthorStyles 并让 css 泄漏
我不确定什么是最好的方法，因为每种方法都有其缺陷。
为什么我要包装基本组件？有共同的行为和API。例如：在表单中启用和禁用组件。我在聚合物中的所有基本组件（x-button、x-input 等）都从我的框架类扩展而来，在这个框架类中我有共同的行为启用和禁用，所以我可以使用相同的 API 来启用和禁用组件。
这是一项进展缓慢的工作，更多的是为了好玩，我停止了这项工作，因为我需要花更多的时间来创建应用程序而不是创建框架。不幸的是，没有像 ExtJs 和 Dojo 这样的 JavaScript 那样好的 Dart 组件框架。
但是想法是制作一个组件集（具有共同行为）并使用 sass 框架来获得视觉效果，也许可以将 css 框架抽象为一种可以插入并改变应用程序的外观和感觉的方式，这并不容易，因为某些组件具有特定的 html 标记
于 2013-11-20T15:15:56.750 回答