[发明专利]一种Web Components组件中引入样式的方法及装置

说明书

本申请公开了一种Web Components组件中引入样式的方法，以及一种Web Components组件中引入样式的装置。所述Web Components组件中引入样式的方法包括：获取一个或者多个样式模块；将各个所述样式模块编译生成对应的CSS结果；将各个所述CSS结果进行组件化封装，分别转换为对应的样式组件；根据所预设的条件，将合适的所述样式组件引入到需要该种或者该些样式组件的Web Components组件中。采用上述方法，解决了现有技术中由于Web Components样式隔离特性所导致的组件外部的样式无法引入到组件内部的问题。

技术领域

本发明涉及Web前端领域，具体涉及一种Web Components组件中引入样式的方法及装置。

背景技术

Web Components作为Web前端领域的一种新兴组件化规范，代表了今后的发展方向，基于此创建的组件是对外隐藏实现细节的，包括样式隔离和事件重定向。采用这一技术有利于创建可复用、标准化的组件。其在作用域以及样式封装上的好处，使得组件在CSS样式影响范围上更加安全，样式的隔离对于防止外界因素干扰非常有用，但是这也导致了WebComponents组件外部的样式无法影响到组件内部的问题，阻碍了整体站点的风格统一。

在新版CSS的草案中，曾出现过一种通过符号“/deep/”或“::shadow”来指示其下的样式允许从外部穿透到组件内部，影响到组件内部样式的表示法。因此，可以在组件外部将全局样式通过该表示法定义，从而达到样式穿透到组件内部的目的。例如，定义“超链接”标签的全局样式为蓝色，其CSS描述为：html/deep/a{color:blue；}，以上的描述，可以使在页面中和组件内部的“超链接”标签<a>的颜色样式均变为蓝色。

通过符号“/deep/”或“::shadow”来指示其下的样式允许从外部穿透到WebComponents组件内部，影响到组件内部的样式的表示法，该方法出现于新版CSS的草案中，但目前该表示法已经不被推荐，并逐步废弃，其缺点主要有以下几点：

1.性能不佳，全局样式若要利用该表示法穿透到组件内部，则CSS选择器只能比较宽泛，类似于“散弹射击”的做法，在浏览器实际渲染时，会在本来无需作用的元素上做过多无用的遍历匹配检测，导致性能不佳的问题。

2.样式分裂于组件内外两处，既然“样式从外部穿透到组件内部”，就出现了一个组件的样式分属于组件内外的问题，不符合组件内聚性的要求，样式维护成本也将变高。

3.偏离标准初衷，按Web Components的初衷来说，出于对外隐藏实现细节的目的，通过Shadow DOM实现了样式隔离，而该表示法却打破了这一设计初衷，为样式污染开了一个口子，这也是为什么该表示法在草案中出现后又被废弃的原因之一。

由此可见，现有技术中的Web Components组件外部的样式穿透到组件内部的方法存在性能不佳、维护成本高和存在样式污染的问题。

发明内容

本发明提供一种Web Components组件中引入样式的方法，以及一种WebComponents组件中引入样式的的装置；以解决现有技术中由于Web Components样式隔离特性所导致的组件外部的样式无法引入到组件内部的问题。

本申请实施例提供了一种Web Components组件中引入样式的方法，所述方法包括：

获取一个或者多个样式模块；

将各个所述样式模块编译生成对应的CSS结果；

将各个所述CSS结果进行组件化封装，分别转换为对应的样式组件；

根据所预设的条件，将合适的所述样式组件引入到需要该种或者该些样式组件的Web Components组件中。

可选的，所述样式模块，包括: