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 ?
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.
Related
This is my short problem, in my page I have an old version of Materialize, and I have seen in the last version of it that they have added the class "xl" to define grid's sizes.
If I upgrade all files, my page will break, because for example, in my JS file I open the modals with the function "leanModal()" and in the new version they use "modal()" and if I upgrade it, is a lot of time!!.
My questions is the next:
If I only need the class "xl" can I upgrade only the CSS File? If I would make it, would have a problem in the future with the JS File?
My version of Materialize: v0.97.7 (2014-2015)
The actual version of Materialize: v0.98.1 (2017-Now)
I'm not all that familiar with Materialize but I believe it has components that are implemented with a mix of CSS, HTML and JS. If you are using any of these components then yes, there's a possibility that other things might break. Typically these components will be expecting a certain HTML structure and CSS classes to be available/used. If the name of something has changed in one area of the framework then it's reasonable that something else could have changed elsewhere. You'd have to verify that yourself.
Yes, You will have problems because the JavaScript calls specific classes in the CSS for that version.
More of a curious question rather than solving an actual problem.
How do frameworks like angular contain CSS within a component and prevent the CSS from leaking all over the page?
Angular 2 uses the ShadowDOM concept which allows for CSS to be contained within a component.
By default Angular 2 uses "emulation" which means it emulates a ShadowDOM implementation so that its more likely to work on older browsers.
It can be set to use the native browser implementation (but will only work if the browser supports it).
As a side note, ShadowDOM can be completely turned off in angular 2 and CSS will leak as you expect it.
In default ViewEncapsulation.Emulated CSS is added to <head> for all components. Component tags and the elements in their template get a unique CSS class added and the selectors of the styles are rewritten by Angular2 before they are added to <head> to only match the specific component where the styles were added to.
If ViewEncapsulation.Native is used for browsers with native shadow DOM support, the styles are added directly into the component.
If the browser doesn't have native shadow DOM support and webcomponents polyfills are loaded this works similar as Angular2 with ViewEncapsulation.Emulated
I am currently working on a project in university where is allowed to use only Dojo (version 1.8). I have following problem: I need to set element css in javascript code. So,
any alternatives in Dojo for jQuery.css()?
Looks like you are looking for the set function in the dojo/dom-style module:
http://dojotoolkit.org/reference-guide/1.8/dojo/dom-style.html#dojo-dom-style-set
And just a thing, the correct terminology for what you are trying to do is setting the inline style of your elements. CSS is just the language used to write stylesheets.
My web site changes the CSS of some DOM elements when certain events occur, but I find it icky to have CSS in both my static CSS files and in my javascript files. Is there a good model that I can stick to that allows me to change the CSS of elements in javascript while not having explicit CSS in my javascript code?
Currently I'm using calls like:
$domElement.css ('cssProperty', 'cssValue');
in my javascript code, but I don't want to do that since the CSS info should be in its own file.
What good options do I have?
I appreciate any help!
One option is to define different classes in your CSS file, then do this instead,
$domElement.addClass("theclassname");
Of course, if you're generating the 'cssValue' part of your example dynamically, then you can't specify the CSS ahead of time, so you have no choice but to modify it directly with JavaScript as you are currently doing.
I am developing a component for Joomla website. This website has a sophisticated template with fancy css and scripts (namely some K2 components are named) In this component I am using colorbox to display modal picture gallery but what happens is
as soon as this component is called CSS properties and functions of javascript of template fails resulting in some weared page displays.
As I have not written these CSS and javascripts it will be quite cumbersome for me to prevent conflicts among CSS and scripts.
So what is my question is
Is there any way to prevent conflict between these scripts without diving much into the actual scripts.
Please guide me through this.
Thanx in advance
K2 is a content component for Joomla. It's not unusual for framework plug-ins or add-ons to have conflict(s) with one another. Unfortunately, you might have to search into Joomla or K2 forum for answers. Either that, you can try disabling other plug-ins one by one till the conflict disappears (hopefully).
One of the main conflicts in JavaScript is between MooTools (required for some Joomla functionaly) and other JavaScript libraries. Most common is the $ global variable which is commonly used as a DOM selector.
In MooTools, it only selects by ID, while in other libraries like JQuery, it uses CSS selectors.
So if you have a Joomla extension that loads another JavaScript library like JQuery, you'll run into problems. For JQuery, there is a specific solution.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
For other libraries however, you'll need to dive into the JS, or use an extension that offers the same functionality but uses MooTools.
As for CSS, the only way around this is to edit the CSS files. Good extensions should use some sort of namespacing for their CSS. For example, prefix all CSS classes with the component name. Or wrap all HTML in a wrapper element named after the component, or module etc.
If this doesn't exist, you'll have to add it yourself.
Probably the easiest is to edit the extensions HTML and add:
<div id="extension-name">
<!-- extension HTML here -->
</div>
around the extension.
Then edit the extensions CSS and add
#extension-name
before all CSS selectors.
For example, if you have:
.left-column {
float: left;
}
change it to:
#extension-name .left-column {
float: left;
}
You can even automate this process with a regex search and replace.