I have included a 3rd party pagination module for my angular application. It is working perfectly except that it does have some html that I don't want on my view.
I tried to hide that mark-up by applying display: none !important; CSS property but it did not work so I had to pass
encapsulation: ViewEncapsulation.None
to my component decorator and it started working. Only problem I have with this approach is when I route away from the current component. It messes up with the button styles of my dashboard component. This problem also goes away on dashboard if either I reload the page or navigate to another route.
Is there any decent solution to this?
I am using style-loader with css-loader in React application. Each time I change/update my code, wether it is JS or SCSS, my client.js and client.css are rebuilt.
Each time that happens, webpack config/plugins do a very cool feature. Any class that is not used in React is not added to final .css file. Awesome right!
But I need all the classes to be added in. Even the once that are not used.
I am migrating from React to Twig and I copy paste generated HTML from React application into Twig and modify React components to have all the static HTML in twig leaving only some small interactive bits in React.
FYI That was a business decision as ReactJS was server rendered for best SEO optimisation, but it does not make sense in our case.
If you know a better way to migrate ReactJS application into Twig please let me know! I think biggest challenge will be optimising classes name conventions from React into Twig. At the moment I am coping the fully generated name like <div class="src-components-common-Page-___Page__page">.
This is one of those "what should we do about this"-questions. As you know, web components are supposed to be small, contained applications for websites. However, sometimes these needs to be styled depending on the site they're embedded on.
Example: "Sign up to our newsletter"-component. This component would have a few key items:
An input box
A button
Maybe recaptcha
A method that talks to your service once the button is pressed (passing in the email)
We're going to use Google and YouTube as examples. Google's color scheme is blue (let's imagine that) and YouTube's color scheme is red. The component would then be something like <newsletter-signup></newsletter-signup> on the page you're embedding it in. Both Google and YouTube have this.
The problem comes in, when the component needs to inherit the styles from Google and YouTube. A few deprecated CSS selectors would be great for this, because Google and YouTube's style sheets could simply enable colors for the Shadow DOM, so we wouldn't have to copy/paste the styles. The component should theoretically not know anything about the styles from the host, because we want it to inherit from the host (Google and YouTube).
At the moment, I'm creating a web component using Angular 6, which has a lot of styles, because it has a lot of elements. I'm copy/pasting styles, Bootstrap, icons, and so on from the host site, then styling them based on <newsletter-signup brand="google"></newsletter-signup>. So if the brand is Google, the colors should be red, for example.
This is really bad, because of a few reasons:
Styles have to be updated on both the web component and on the host
Duplicated code is never a good idea
If all the styles are copied 1:1, the amount of bytes required for styles is doubled
How would I, as a developer, take this into account? How do I make styles on the host, then apply them on my web component (call it inheritance)? I'm sure someone has had the exact same problem with Shadow DOM as I am experiencing. Thanks for reading.
I realize you do not want to write same kind of rules for your common component(selector)
i.e. you want to do styling as where your common selector is placed.
Things you can do to handle this:
1. Create your own logical css framework
Write most commonly used CSS rules in global css.For example if you have integrated bootstrap and you want to override bootstrap, you will write most common overrides in app.css which overrides bootstrap.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles/app.scss"
],
This app.scss should be written in way to which you can override.
Send Rules as input
send custom rules Obj and use in elements you want to override.
<newsletter [input]="customRulesObj"></newsletter>
component.ts
customRulesObj = new CustomRulesClass();
customRulesObj.color = 'red';
You can send rules in input in various component by creating a common class
as you know where you are embedding this component.
Extend this component from a common component
If you are too concerned for css you can extend your component from a common component which provides you with css logic as per need.
export class NewsLetterComponent extends CSSComponent implements OnInit
{
}
css-component.ts
In this component can logically define css as per host, current routerlink and
other multiple if else condition.
You can define rules by switch case conditions and bind those rules to component you have extended.
One of the biggest must-do's of web components is: My host (page where I'm embedding my web component) should not depend on the web component nor know about the web component.
What this basically means: Styles of my web component should not be shared with the host.
If my host decides to update the styles, it should affect my web component. Not the other way around. To solve this, I imported the external styles from my host directly inside the CSS file using #import. Here's an example:
import url("https://my-host.com/styles/core.css");
my-component {
//all styles goes here
}
I did this using SASS but can be done using regular CSS.
This is not a great solution at all, but it does what I want: Inherit the styles from the host. Although I would have to import every stylesheet there is, it still works.
A downside to my solution: When I load the page, it will send a request to the style from the <link> element inside the <head>-tag my host, but also to the style inside my import. So the styles are loaded twice. For our application, which is internal use only, it doesn't matter if we request additional ~200 KB data.
This question is a few years old and the situation has changed. The way to share styles with web components is now to use link tags to a shared stylesheet.
Inside each component:
<link rel="stylesheet" href="https://my-host.com/styles/core.css">
Reference:
https://github.com/WICG/webcomponents/issues/628
I am newbie in Angular, do not blame me if something I explained wrong ...
I have started learning of Angular and faced with the problem:
How to separate style of my component from default style in Web App ?
It is useful when you find a nice Angular Component on the Web, copy it in your application and it looks like as was intended.
I have found on the Web that something like this possible with:
encapsulation: ViewEncapsulation.Native
But seems it doesn't work ...
Is there any solution for such case ?
I'm trying to add stylesheets encapsulated in specific components so as not to pollute the global scope with stylesheet rules. I have a series of widgets, each of which will need different 3rd-party stylesheets. In the end there could be hundreds of widgets, each one loaded on demand. It seems obvious that the following code should work, and both index.css and material.scss should both get bundled up with my components, and their rules will be encapsulated from the rest of the application.
#Component({
templateUrl: 'data-table1-widget.component.html',
styleUrls: [
'data-table1-widget.component.sass',
'../../../assets/css/ngx-datatable/index.css',
'../../../assets/css/ngx-datatable/material.scss',
'test.css'
]
})
However, I'm definitely not seeing what I would expect from index.css or material.css if they are included properly. I get no errors about missing files, but I don't see the rules for index or material getting applied. However, they DO work if you include them from the main styles.sass. So am I missing something here? How do I get multiple stylesheets loading into my component? Index.css works just fine, so it makes me wonder if there's something about how the rules are defined that makes them not work.