简体繁体 English

Shadow DOM - 封装 JS 和 CSS 文件

[英]Shadow DOM- encapsulate JS and CSS files

原文 2017-02-03 04:25:50 9 1 javascript/ jquery/ html/ css/ shadow-dom

I have created a component (custom element) that will use specific version of JQuery and Bootstrap libraries.我创建了一个组件（自定义元素），它将使用特定版本的 JQuery 和 Bootstrap 库。 Now I need to add this component into other applications which are already using different version of JQuery and Bootstrap libraries.现在我需要将此组件添加到已经使用不同版本的 JQuery 和 Bootstrap 库的其他应用程序中。 Some of the applications in which I will add my component is not using bootstrap library and including it may create other issues.我将在其中添加组件的某些应用程序未使用引导程序库，并且包含它可能会产生其他问题。

Now to keep the implementation simple, I am planning to use shadow dom.现在为了保持实现简单，我计划使用 shadow dom。 Is it possible to create a element using Shadow DOM which internally use multiple JS and CSS files but when included in other applications, does not cause any issues with respect to JS and CSS files its using.是否可以使用 Shadow DOM 创建一个元素，该元素在内部使用多个 JS 和 CSS 文件，但当包含在其他应用程序中时，不会导致任何关于其使用的 JS 和 CSS 文件的问题。

What I know is shadow DOM does not encapsulate JavaScript.我所知道的是 shadow DOM 不封装 JavaScript。 What are my options here ?我在这里有什么选择？

1 个解决方案

Concerning JavaScript libraries, it depends if the library was designed for that.关于JavaScript库，这取决于该库是否是为此而设计的。

It's possible with jQuery thanks to its noConflict() mode .由于其noConflict()模式，使用 jQuery 是可能的。

Concerning CSS libraries, they can be included in the Shadow DOM using the @import url rule .关于CSS库，可以使用@import url规则将它们包含在 Shadow DOM 中。

The rule should be placed at the very beginning of the <style> element.规则应该放在<style>元素的最开始。