CODEWITHSUNDEEP
javascriptjqueryhtmlcssshadow-dom
OpenStack
OpenStack

Reputation: 5596

Shadow DOM- encapsulate JS and CSS files

I have created a component (custom element) that will use specific version of JQuery and Bootstrap libraries. Now I need to add this component into other applications which are already using different version of JQuery and Bootstrap libraries. 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. 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.

What I know is shadow DOM does not encapsulate JavaScript. What are my options here ?

Upvotes: 1

Views: 601

Answers (1)

Supersharp
Supersharp

Reputation: 31181

Concerning JavaScript libraries, it depends if the library was designed for that.

It's possible with jQuery thanks to its noConflict() mode.

Concerning CSS libraries, they can be included in the Shadow DOM using the @import url rule.

The rule should be placed at the very beginning of the <style> element.

Upvotes: 1

Related Questions