I want to make a responsive website using react, should i use media queries for change layout and set display to 'none' for some components in mobile ( like regular html and css ), or do that in-react and don't render that component rather than don't display it using css ?
for example, for a menu, if user clicked on the menu button, change display property of menu from 'none' to 'block'
<ul id="menu">
<li>one</li>
<li>one</li>
</ul>
toggle the 'open' in the classList of the DOM Node
and in the css
.menu li {
display: none;
}
.menu.open li {
display: block;
}
or like this,
use state and if user clicked on the menu button, change the state and make react to render the menu
[open,setOpen] = useState(false);
open?<Menu />:'';
which one is a better approach ? which one is recommended
and one more question, using 'refs' for accessing the DOM nodes in react is better than use traditional document.getElementById() ?
My initial reaction is that you probably aren't building anything that absolutely requires the most performant solution, so hiding an element via CSS versus eliminating it from the DOM via React is not going to matter much in the long run. My recommendation is do whatever you can to get your project complete and then worry about performance if your use-case warrants it.
With regards to your specific example, it is probably better to just toggle the element's existence with React versus applying a class to toggle the display property. My reasoning for that is because both operations will require a DOM manipulation (React would have to either add the list element or it would have to update the className value). Using a CSS class to toggle the display will also have a secondary task of applying the new display value which causes another reflow of the content.
React solution: Update DOM to insert new node.
CSS solution: Update DOM to add className. Reflow content based on new display property.
Regarding your second question about $refs...
Using $refs will be better than document.getElementById. The $refs object maintains an in-memory reference to HTML nodes that need to be manipulated. document.getElementById will require traversing the DOM tree to find the element, where as using $refs simply looks up the node via a named property.
If it's possible to do in CSS, always use CSS. JS is expensive than CSS in terms of loading and rendering. For your requirement, you need layout change depending on the device it's loaded. So use media queries and CSS Grids to do that without using JS.
Refs is the react way to get DOM element. So please use that instead of using methods like document.getElementById().
Related
lit-element completely encapsulates CSS and the only way to style components is via custom CSS variables.
When using tailwindcss all styles are applied via classes, and I currently don't see a way to inject those classes from the outside world.
What I would like to achieve is to make the custom lit-component completely unaware of tailwind. It should only do the most basic styling but leave the customisation up to the user of the component.
The only solution I see right now is to provide the classes via a property and then apply them using classMap. But I don't know where users would like to apply those classes and adding them to each element is unfeasible (and unmaintainable). In addition, I have my doubts that tailwind would even work in that case due to the style-encapsulation.
It sounds like you want your users to be able add classes to specific parts within the custom element you authored?
If it works with what your component's trying to do, the best way to achieve that would be to place slots in your component and have the user provide the element to fill those slots as children to your component. That way the user directly controls what classes they want to put on it and the styling will apply as the children would be part of the light DOM.
As you've said, providing classes via property would be clunky API and styling won't apply unless you forego using shadow DOM by overriding createRenderRoot which is not recommended.
CSS custom properties are not the only way to allow users to style parts of your component as you can also add part attributes letting the user use ::part() pseudo-element to style them. If your users can write CSS instead of providing tailwind classes, that would be the way to give users some control of styling your component. See https://developer.mozilla.org/en-US/docs/Web/CSS/::part
I am currently developing a web-application with Vaadin. Vaadin components are using the web-components standard, so the components DOM is capsuled in a shadow dom.
Now I would like to apply a custom style for all the scrollbars in the application.
This is possible using the CSS ::-webkit-scrollbar selectors (if the browser supports it).
However, this styles don't apply to the shadowDOM, so if one of the web-components shows a scrollbar (for example the vaadin-grid), that scrollbar does not use my custom style.
Is there a way to apply this style to all scrollbars on the page without adding the custom style to the shadow dom of every web-component?
Is there a way to apply this style to all scrollbars on the page without adding the custom style to the shadow dom of every web-component?
No, there is no way do that. That is specifically what web components are purposed to do. I.e. to protect internals from the direct access. So customization of protected elements is possible only when the web component offers some sort of API for that.
In Vaadin the typical approach is themable mixins / style modules which you can import for components in format like below
#CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-grid")
As pointed out by Jouni, you can register a style sheet that applies to all Vaadin components, with themeFor="vaadin-*"
#CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-*")
Which helps the burden.
I am currently in the process of creating a custom form component for my Angular component and am running into some styling issues.
I'd like for my input to be able to take variable widths and for them to be controlled by the host component.
For example: <my-input class="input"> would have a corresponding class as such:
.input {
width: 250px;
}
For some reason, if I do this, the rules are just ignored and not applied to my component.
I've seen others wrap their components in what seems like unnecessary divs and then styling those parent divs so that the content inside fits. I don't want to write wrappers just for styling purposes when a CSS rule would suffice.
Would doing this involve using :host ?
Also, how about, host-context(.input) and then applying the classes inside of the consumers CSS ?
I would advice against using ::ng-deep since the Angular team is planning on deprecating it.
If you want to style something within your component from whatever component is hosting yours I suggest you create a host-binding/input and then use that value to bind to your component using the style-directive.
Consider the following hierarchy in some Angular 2/4 project:
<parent-cmp [ngClass]="{ 'parent': condition }">
<child-cmp class="child"></child-cmp>
</parent-cmp>
Now in the child component's CSS file I would like to say:
.parent .child {
background-color: red;
}
In this scenario, I'm basing the child's design on parent's logic without knowing what that logic is at child level. But the problem is that, this is not going to work. And that's because, Angular compiles the the child CSS selectors to this:
.parent[_ngcontent-c9] .child[_ngcontent-c9] {
background-color: red;
}
And the parent part of the selector is not going to work anymore. So How can I pull this off? Also please bear in mind that I simplfied this example and the two components are not necessarily one after another (there might be arbitrary number of components in between).
In Angular this is called "view encapsulation" where the JavaScript, CSS styles, and HTML templates are all managed by Angular. There are a lot of advantages to this approach as it allows you to easily tree-shake a project and drop components that are not being used. You not only drop the Javascript code, but all the styles and HTML with it.
When it's turned on the styles are injected into the DOM as embedded styles. Angular keeps track of what styles are required on the document and adds or removes styles as needed. These styles can have strange names at run-time like those in your question.
You need to read up on the https://angular.io/guide/component-styles styles guide to see how to define a :host style. This is the style assigned to a component when view encapsulation is turned on. When using :host you can refer to the parent selector using a :host-context path, and you can also style inside other child components using the ::ng-deep selectors.
Keep in mind. This is all optional. It's turned on by default, but if you don't want to use it. You can turn it off.
You can change the view encapsulation mode when you define your component. To disable this feature just change the encapsulation option to native.
See the guide:
https://angular.io/guide/component-styles#view-encapsulation
I've been working with React for a little while but animations is one thing that is confusing me.
Currently I use CSS in my react components. Each component imports a single css file that I use for styling instead of using inline css.
My question is: If I have a page like a landing page where there is no state being updated whether it is fine to use keyframe animations and similar things in css?
Side-question: Am I free to use keyframes for a non updating page like a landing page, or will it totally break for more complicated pages?
You are 100% safe to use any CSS you want in your pages. CSS is merely a language used for describing the style and presentation of your elements. React doesn't care about all that; it cares only for the DOM of your page - or at least the part of the DOM that React created/controls.
The Document Object Model (DOM) [...] provides a structured representation of the document as a tree.
CSS doesn't (cannot) interact with the tree structure of the DOM, nor do CSS animations. They just apply style properties to the elements which, depending on the animation, may give the impression that the layout of your DOM tree changes, but this is not the case.
So to answer both your questions: No css will break your code or otherwise interfere with React, regardless of implementation.