Given a webpage with dynamically loaded web components (shadow DOM) and some external CSS files (Bootstrap, etc.). I want these CSS files to be applied within the components (shadow DOM). What are the possible solutions?
Using Polymer -- we're already using AngularJS and don't wanna start messing with another framework too. (Although it's possible.)
Refactoring the CSS files and include /deep/ everywhere -- maintainability...
Import each CSS file manually into the beginning <style> part of each shadow DOM -- no comment...
Is there any better way to apply whole CSS files within shadow DOMs?
Question is a bit old, but putting this answer here in case it helps.
/deep/ has been deprecated
Other option is to use custom properties provided by Polymer.
If you don't want to use Polymer then as suggested in the discussion on the /deep/ and ::shadow selectors deprecation thread, you can you use css #imports.
You can generate the url of your external stylesheet and inject it in your shadow dom templates at run-time.
I have written a descriptive answer here on the topic.
Related
I am currently implementing a plugin that gets dynamically incrusted into a DIV (not an iframe) and am currently using Bulma as my CSS framework. The issue I am having is that since this plugin is going to be integrated into many sites, it will also inherit the styles applied to the parent website.
Due to many of the classes being a standard name in many frameworks, such as column, button, form, and others, this is creating a conflict.
I have been reviewing a couple of packages that either add a prefix to these classes as well as use a namespace.
Namespace:
The namespace route does not work since this does avoid our plugin from not interfering with any of the other sites' styles, the site's styles still affect ours.
Prefix Packages:
https://www.npmjs.com/package/gulp-class-prefix
The other route I was researching ways to add a prefix to all the classes from our plugin, such as -column, but I understand that this will output a CSS library with all the classes with the prefix but not my HTML files which have the class="column".
I am hoping to find a solution for this, as I would think this is, although not common, a recurring issue/question and I just haven't found the proper solution for this.
Any advice would be appreciated.
You can use the #layer css rule:
The #layer at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.
Example:
/* styles.css */
#layer bootstrapFramework, myPluginStyles;
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css")
layer(bootstrapFramework);
#import url("https://yourPluginStyles.css")
layer(myPluginStyles);
Doing this will override bootstrap classes with your plugin CSS classes. Due to the order of the layers.
Check out the browsers support for the rule.
You can read more about #layer CSS rule here: https://developer.mozilla.org/en-US/docs/Web/CSS/#layer
You can also checkout Web Dev Simplified Channel by Kyle on youtube. Here is the link to the video: https://youtu.be/Pr1PezCc4FU
Hope this answers your question!
Yeah. That's fine. Just add a prefix to the HTML classes too. It should work.
Or you can choose to ditch CSS frameworks for the plugin and write the CSS for the necessary components. You just do a little reset for your component's HTML elements and you can expect a fairly consistent design across multiple different implementations.
I feel this may be just helpful too. custom HTML elements too.
Best of luck.
just use div-to-select * { all:revert }
then add the code for the div & bulma
Explanation
all: revert gets every thing to normal so it makes all other frameworks class's styles to default
please take a look on https://agilecss.com CSS framework and UI kit, it provides some unique features not available in other frameworks, for example all the common used UI elements without JavaScript.
in my react project, in the SRC directory I have components directory, which contains components folders, every component folder has react component (JSX) and a CSS file, I found that the CSS styles in a component folder overlap with other components styles, although I'm only importing it in the JSX file that I want to use the styles for, why is that happening? like I want to have a CSS file for every component separately
Do you have experience in pure HTML, CSS, and JS before? CSS rules are global.
The closest to what you are looking for is CSS module, if you are using Create React App, it is supported out of the box.
At the end of the day all your styles are compiled into a global stylesheet, specifically in multiple style tags spread across the application which are scoped to the global app.
If you need to scope styles to components, you need to use something like styled components.
Take a look at this post that might help you understand it better.
https://blog.logrocket.com/styling-in-react-4-ways-style-react-app/
I have a package/library (cs-clock) written in Angular to generate a UI Widget. This was published to a local repository. This library has some default styles within the library codebase.
Now I have another application where this library is used as an NPM Package via package.json. When the parent is trying to render the widget - The default styles are rendered from the library.
Now, I want to specify styles from parent to this library which means whenever a new theme CSS file is included in the parent, the child library should be able to render those styles.
I tried with the following options:
Using encapsulation property of Angular- By setting it to None and exposing classes
Using ::ng-deep, :host /deep/, :host >>>
Putting a CSS file in index.html of the parent with !important to the classes specified in it.
Unfortunately, These approaches does not seem to be the ideal one. Is there any other way through which my use-case can be achieved in a better way.
Any help is much appreciated.
I am using mozilla - X-tabs, web components in my application for tabbing it. Now, i need to use bootstrap - glyphicons in my app. But since webcomponents use shadow-DOM, bootstrap css styles are not applied inside web components?
Is there a way around it, to share a css file/style for all web components?
You possibly want to read CSS Scoping Model by W3C.
Each polyfill library (I’m sure, e.g., Mozilla’s does) provides handlers for /deep/, ::content etc selectors.
Hope it helps.
We faced a similar scenario with font-awesome. We had a bunch of classes that are common across web components. We loaded them directly from the host and made those classes available to components using /deep/ combinator (soon going to be replaced with >>> syntax)
The polyfill (Webcomponents.js - from Polymer) used by X-tags has support for /deep/ and ::shadow (single level). You can use these selectors to target shadow DOM from outside.
Polymer provides an element core-style for this, see here.
This blog post goes through how to set it up, you use the same tag to declare the common styles and to import them.
<core-style id="button">
button {
display: inline-block;
background: #bada55;
}
</core-style>
The presence of an id makes this element a producer of common styles.
Then to import the common styles inside the shadow dom of a component:
<core-style ref="button"></core-style>
The ref attribute makes this a style consumer.
So AFIK its not possible in a standard way yet with plain web components, but there's the core-style extension in Polymer, or the Polymer support for ::shadow and /deep/selectors.
Web components supports css stylesheet import:
<template id="template-for-your-component">
your web component
<link href='./.../share-rules.css' rel='stylesheet' />
</template>
You can have a global stylesheet shares between all your components without duplicate your rules.
I'm building an application in GWT and have a skin from my graphic designer which I've plugged into the app using UIBinder and it works beautifully. Now I want to bundle all the images using ClientBundle.
Mayne of these images are used in the css file e.g.
.nav{background:url(nav_bg.jpg) left top repeat-x; height:27px; clear:both;}
Before this css I have defined a tag to include the bundle.
How can I change the css entry so that it uses an ImageResource from my ClientBundle? I guess I can do inline styles for all the html tags but that's horrible separation and a lot of extra work.
I have successfully used ImageResources in the html part of the uibinder file (e.g. in a ) but I cannot see how to do this in the css. I have even inlined the css in a block but I still don't see the correct way to do this.
Any suggestions?
ClientBundles can now be used to host CssResources as well.
These CssResources are CSS files with some extra functionality.
The docs of GWT describes what you need in the section about ImageSprites.
I ended up skipping GWT css and image bundling altogether. Instead I've had my carve done using a css sprited image block made by the design/carve team. This has these advantages.
1/ Much less css porting since I can plug the html directly into ui binder and use the css tags from the carve i.e. not using uibinder css. As long as the html structure matches the carve then this is a lot less work than migrating all the css into gwt css.
2/ It also allows me to use svn/diff when applying changes - this was not possible when using gwt css/image spriting.
3/ I can easily put the image/css files on a CDN since the load tags are in the host page and don't suffer from Same Origin restrictions. FYI : yes I know about the XS linker as another way to do this.
It stops being useful when the carve uses css for positioning and I want to use LayoutPanels but that's not too bad as long as I request that the layout css is separate from the style css.
So in the end I discovered that, when working with design/carve from a third party, it's much easier to avoid using gwt css/images but to reproduce the same benefits using traditional css spriting and minification. I hope this helps someone.