Due to certain circumstances, I'm forced to move my Angular 2 App to AngularJS.
Most of my Components have their own StyleUrl property for their specific stylesheets. So far searching online, I haven't found a way to do so in AngularJS, except integrating Webpack to my project, however I'm having trouble doing so.
I was wondering if there's another way, and if there isn't, what's the proper way of using Webpack for this?
EDIT: 5/9/2017:
Wanted to give an update on my situation. After some testing on the Dynamic CSS loading module which Yeshwanth provided, I discovered that the component CSS leaked to the outside DOM, which meant I had to keep searching for another solution.
Eventually I resigned to use the SCSS approach: Inside the component template, define one, big, encapsuling div element, and give it an ID of some kind. Then, inside an .scss file, write the style block for that ID and INSIDE that block place all of your component styles. After compiling the SCSS file, the resulting css file will act only on the component's elements.
I'm not sure if this fully emulates the emulated Shadow Dom of Angular 2, but for my purposes it was enough. Hope this helps.
I think in angular 1.x you cannot import style specific to your component.
But the dynamic css loading might come handy.
Please refer this
Related
Why can't I customize the styling of web component libraries i.e UI5, beyond themes? I have tried everything from inline styling to wrapping the web components in Styled-components. I tried using :host(), ::slott. I've tried to inject style tags into the template itself. I'm really at a loss, I wasn't able to change one pixel of styling. I'm leaning towards the issue being multiple shadow dom or encapsulated CSS.
<TabContainer backgroundDesign={"red"} ref={ToggleRef} className={`webCompToggleTabBar`} id="UI5TabContainer" tabs-overflow-mode="StartAndEnd" collapsed fixed>
{Object.keys(Tabs).map((subTemplate, i) => {
return (<Tab className="webCompToggleTab" key={Math.random()} additional-text={subTemplate} name={subTemplate} />);
</TabContainer>
Now the outer Tabcontainer is easilystyled with any type of styling, but when I attempt to style any of the tabContainer's inner Tabs...crickets
Just for clarity, I am building a lit-html wrapper around pre-built web-component libraries to work with React and Angular. But I need to be able to restyle the imported web-components
so the issue with styling web components from freely available libraries are:
Web components are usually created using the shadowDOM, this is great for
encapsulation. But when you want to go back in and try to override that
encapsulation and completely overwrite the web components CSS. You will
get stuck in the top layer of the web component, just outside it's shadowDOM(if there using it). With some libraries,
this is done on purpose, others allow you to do this but you may have
to fork over some hefty cash to use those libraries.
Fortunately, there are some things you can do to spice up the web-
components. CSS variables, A lot of libraries build CSS variables into
their components for theming. So one thing you can do is find their list of CSS variables either on their Documents page or in the elements tab in your browser and just cut and paste them
in.
If this is not enough for you there is another option.
You can create your own web components in a way very similar to
creating them in ReactJS. There is a tool called Stencil which
gives you a way to create web component using typescript and CSS.
Stencil solved all my issues, it has all the polyfills built in.
It sets up all your testing and deploying. https://stenciljs.com/
I am a web developer and recently started working with Ionic 4 which is based on Web Component. I was trying to edit the CSS of the components but I was not able to edit the same and later on figured out that it was because of Web-Components which do have #shadow-root.
My Question is, Is there any way to edit the CSS and JS of a Web Component.
If not, why is it there?
The drawbacks of the same according to me are:
- Not able to apply the custom CSS into the child components of the Component.
- Plugins like Stylus will be useless as the CSS won't be applied and we won't be able to get the dark mode.
The Component Author decides the level of styling that can be applied.
no #shadow-root
All global CSS applied
all children are part of the main document DOM
ShadowDOM created with this.attachShadow({mode:"open"})
No global CSS applied
CSS Properties (if used by the Component author) are applied
You can access the shadowRoot and overwrite everything inside
(this is like buying an IKEA table and putting a saw in it)
shadowDOM created with this.attachShadow({mode:"closed"})
No global CSS applied
CSS Properties (if used by the Component author) are applied
You can not access the shadowRoot
Documentation
source: https://developers.google.com/web/fundamentals/web-components/shadowdom
TL;DR
Shadow DOM removes the brittleness of building web apps. The
brittleness comes from the global nature of HTML, CSS, and JS. Over
the years we've invented an exorbitant number of tools to circumvent
the issues. For example, when you use a new HTML id/class, there's no
telling if it will conflict with an existing name used by the page.
Subtle bugs creep up, CSS specificity becomes a huge issue (!important
all the things!), style selectors grow out of control, and performance
can suffer. The list goes on.
Shadow DOM fixes CSS and DOM. It introduces scoped styles to the web
platform. Without tools or naming conventions, you can bundle CSS with
markup, hide implementation details,
and author self-contained components in vanilla JavaScript.
Read all about styling components:
https://developers.google.com/web/fundamentals/web-components/shadowdom#styling
(not a standard yet) https://developers.google.com/web/updates/2019/02/constructable-stylesheets
I have a react component that wraps a variety of other react components using a standard interface. The wrapped components are "blackbox" plugins because I may not be their author. So there is an interface definition of what these components need to be capable of in order to "fit" the plugin wrapper.
Now I need those plugins to render styles or event listeners defined by the plugin wrapper.
Unfortunately the plugin wrapper cannot simply add a react html element around the plugins because such an element might end up between <tr>s and <table>s, or between <td>s and <tr>s which is invalid.
I should impose something on the plugin interface definition that tells plugin to render the passed dom props on their top level html element, and I'm wondering what that definition could be.
An attempt at requiring the plugin's top level component to be a html element failed as I don't know of a way of distinguishing react html elements from functional components.
Does anyone know of a distinction, or is there anything else I can do? Perhaps something to do with refs?
Ok so I'll just require the plugins to implement a domProps prop and make them responsible for adding the passed props into their top-level dom.
If anyone has a nice idea how to verify that passed domProps indeed get rendered by the plugins and throw an error if not, I'll accept this as an answer.
Background
I am trying to create a blog using Angular (5). I am using markdown and storing that data outside the application. It downloads the markdown, parses it into an html string, then binds to the innerHTML of a div.
I understand that I am working against the grain, but I would really like to be able to create an elegant solution here.
Problem
Having the ability to use custom components gives us the ability to do a bunch of stuff with our blog that we won't be able to do otherwise. Signup components, custom widgets, etc. We can do all this and still have the ability to store the content separately outside of the application.
Custom components are not detected from the innerHTML string. Which doesn't allow it. It seems like DynamicComponentLoader used to provide a solution for this, but not anymore.
Clarity
I am not trying to render only the html, or only a single component. I want to render the html and all components included.
I also don't care that it's bound to the innerHTML property, it just seemed to get me the furthest. I can/will use a resolver if that would help.
Example
https://stackblitz.com/edit/angular-wylp55
As you can see the hello component renders in the html, but not the component itself.
Any help would be appreciated.
So I finally figured this out and did a write up.
Here's the link to the updated stack blitz.
https://stackblitz.com/edit/angular-dynamic-html.
I also did a full write up on my company blog. https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html.
I am trying to create reusable components using Angular 1.4.3 and Angular-Material 1.0.5. Idea is that we can integrate these components in different applications.
But the problem that I am facing here is that the Angular material CSS has certain styles applied to generic elements like html,body because of which styles of the consuming app is getting overwritten.
To add more clarity to this, consider an example application A which has its own styles for 'body','html', 'input' tags. This application would include my custom component's CSS and JS to get my reusable component. While doing so, application A loses its own styling. And I cannot do a '!important' on application A's styles as i do not own them.
To fix this issue, I tried namespacing angular material styles as part of my grunt build process. But that didn't really fix the issue and most of my angular material directives doesn't seem to be working.
I tried checking angular material github issues but I don't see a proper solution for this.
https://github.com/angular/material/issues/6369
https://github.com/angular/material/issues/469
Is there a way to properly namespace angular material styles? Please help.
Not totally sure if I understood correctly, but using !important on you own style should override the ones set by Ng Material.
To take one of the examples you linked to
input {
font-family: Tahoma !important;
}
But, remember to use !important only when really necessary. Like in this case, when you can't control the styles that you need to override.