Angular 13
In styles.scss, have a class setup like so:
.dark-theme {
// Some CSS properties here
}
I can toggle the class in my component, and it works, as expected.
But, I want to pull the properties out of the nest, so I'm wrapping the properties with #at-root. The styles work, but I lose the ability to toggle the class on/off.
.dark-theme {
#at-root {
// Some CSS properties here
}
}
Is there a way to do this, so that I can maintain the binding with the dark-theme class?
Related
I'm using the v-deep selector to style tiptap, a rich text editor. For that the .ProseMirror class has to be accessed like so (SCSS):
editor-content {
// ... styles
&::v-deep(.ProseMirror) {
// ... styles
}
}
But how do I style the .ProseMirror class with TailwindCSS? I can't add classes to it, at least I don't know how. Is it possible?
Tailwind can be used like regular CSS.
Try that one
editor-content {
&::v-deep(.ProseMirror) {
#apply bg-red-500;
}
}
I created a server-side component with a shadow-root element.. Is it possible to import a style sheet for the elements within that shadow-root? The CssImport annotation does not work, and I couldn't find anything similar, that could work?!
I could create a static String and add an element, but a css-file-import would be better?! (and of course I could use the component without a shadow-root, but the question was "is it possible" ... )
MyCustomComponent.java
#Tag("my-custom-component")
#CssImport("./components/my-custom-component.css")
public class MyCustomComponent extends Component {
public MyCustomComponent() {
super();
ShadowRoot shadow = getElement().attachShadow();
Span span = new Span();
span.getElement().setAttribute("part", "caption");
Div div = new Div();
div.getElement().setAttribute("part", "content");
shadow.appendChild(span.getElement());
shadow.appendChild(div.getElement());
}
}
my-custom-component.css
:host [part='caption'] {
background-color: red;
}
:host [part='content'] {
background-color: blue;
}
I'm curious why you would want a shadow root around a Flow component, as it doesn't really provide any benefits other than CSS encapsulation.
The #CssImport annotation with the themeFor parameter won't help you in this case, as that only works with Web Components using ThemableMixin (https://github.com/vaadin/vaadin-themable-mixin/).
I'm not sure whether it's possible to load css into a shadow root with Flow, but as long as you have part attributes on all elements you want to style, you can do that with a regular (non-shadow-dom) stylesheet, like so:
my-custom-component::part(caption) {
color: red;
}
Just put that in your styles.css or wherever you have your app's normal global css.
Is there any way to control a CSS variable defined at a component's root level using Angular methods? In JavaScript, we have document.documentElement.style.setProperty() when we set at root level.
In angular, can we use ':host' to declare css variable for global access within component? or do we need to use something like '::ng-deep :root'?
The following question also remains unanswered:
Angular: Use Renderer 2 to Add CSS Variable
Yes you can set variables in root scope:
:root {
--main-color: red
}
Yes you can use :host selector to target element in which the component is hosted.
:host {
display: block;
border: 1px solid black;
}
You can also use, :host-context to target any ancestor of the component. The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root.
:host-context(.theme-light) h2 {
background-color: #eef;
}
Note: ::ng-deep or /deep/ or >>> has been deprecated.
Read more about it here: special css selectors in angular
Just an additional information.
It works both inside ':root' as well as ':host'
We can set values to them by:
constructor(private elementRef: ElementRef) { }
then
this.elementRef.nativeElement.style.setProperty('--color', 'red');
The most constructive and modular way to use css vars in components (with viewEncapsulation) is as such:
// global css
:root {
--main-color: red
--alt-color: blue
}
// inside component component css
::ng-deep :root {
--specific-css-var: var(--main-color)
}
:host {
background-color: var(--specific-css-var)
}
:host(.conditional-class) {
--specific-css-var: var(--alt-color)
}
NOTE: despite ::ng-deep being deprecated, it hasn't been replaced yet (and has no replacement), as can be read in several discussion like this
Best thing for each component like a background color with out using ::ng-deep (which sets bg for all children)
import the following
import {ElementRef} from '#angular/core';
declare elementref in constructor
constructor(private elementRef: ElementRef) {}
then call the function ngAfterViewInit()
ngAfterViewInit(){
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = ' white';
}
this sets bg to white but you can replace it with a hex color as well, so you can do that with every component
I'd been confused by simple scenario when I was working with BEM.
There is a base button in example:
.button {
// styles for button
}
and its modifier with more specific styles:
.button.button_run {
// additional styles for this type of button
// i.e. custom width and height
}
One moment I realize that I need modifier for button_run, let's name it like button_run_pressed:
.button_run_pressed {
// more styles, i.e. darker background color
}
The problem is that it's not correct to name the last element as I did above button_run_pressed according to BEM conventions. But I need to add "pressed" styles only to "run" button, not for all buttons by writing class like button_pressed and mixing modifier button button_run button_pressed.
How should I refactor my code to match BEM conventions?
According to http://getbem.com/naming/, the modifier classes are initiated with two hyphens (--). So a modifier for .button should look like
.button--modifier { /* ... */ }
In your case, I would suggest choosing the following names:
.button {}
.button--run {}
.button--run-pressed {}
Notice, that I also decoupled the modifier classes from the block class, which is more according to BEM rules. You want to avoid creating classes which depend on others to work.
Since you added less as a tag to the post, here's how this could look in less or scss:
.button {
// button styles
&--run {
// modified styles
}
&--run-pressed {
// more modifiers
}
}
This would result in the classnames I wrote above
Firstly, the name should be .block--modifier or .button--run
If you want it only works with both modifier run and press, you should name it as
.button.button--run.button--pressed
Hope this help
Is there any way to control a CSS variable defined at a component's root level using Angular methods? In JavaScript, we have document.documentElement.style.setProperty() when we set at root level.
In angular, can we use ':host' to declare css variable for global access within component? or do we need to use something like '::ng-deep :root'?
The following question also remains unanswered:
Angular: Use Renderer 2 to Add CSS Variable
Yes you can set variables in root scope:
:root {
--main-color: red
}
Yes you can use :host selector to target element in which the component is hosted.
:host {
display: block;
border: 1px solid black;
}
You can also use, :host-context to target any ancestor of the component. The :host-context() selector looks for a CSS class in any ancestor of the component host element, up to the document root.
:host-context(.theme-light) h2 {
background-color: #eef;
}
Note: ::ng-deep or /deep/ or >>> has been deprecated.
Read more about it here: special css selectors in angular
Just an additional information.
It works both inside ':root' as well as ':host'
We can set values to them by:
constructor(private elementRef: ElementRef) { }
then
this.elementRef.nativeElement.style.setProperty('--color', 'red');
The most constructive and modular way to use css vars in components (with viewEncapsulation) is as such:
// global css
:root {
--main-color: red
--alt-color: blue
}
// inside component component css
::ng-deep :root {
--specific-css-var: var(--main-color)
}
:host {
background-color: var(--specific-css-var)
}
:host(.conditional-class) {
--specific-css-var: var(--alt-color)
}
NOTE: despite ::ng-deep being deprecated, it hasn't been replaced yet (and has no replacement), as can be read in several discussion like this
Best thing for each component like a background color with out using ::ng-deep (which sets bg for all children)
import the following
import {ElementRef} from '#angular/core';
declare elementref in constructor
constructor(private elementRef: ElementRef) {}
then call the function ngAfterViewInit()
ngAfterViewInit(){
this.elementRef.nativeElement.ownerDocument.body.style.backgroundColor = ' white';
}
this sets bg to white but you can replace it with a hex color as well, so you can do that with every component