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.
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
How to style a custom element like an existing element? (For example, apply the document <pre> style to a <special-pre> custom element)
BACKGROUND
typical custom elements are based on the generic HTMLElement, in parts because the is="special-pre" attribute is not supported in all browsers (ie. iOS).
page css detailed rules are not always accessible through code, for example when the main page uses a stylesheet through a CDN (CORS restriction)
I've tried through javascript to filter applicable pre style selectors and create a new rule for the new custom element but I hit a wall with CDN provided stylesheets - CORS restriction prevent access to individual rules.
I also thought of inserting a dummy element and use getComputedStyle(preElement) but it feels like a hack and messes with the user's HTML markup.
Other solutions (::part, css custom properties) require advance knowledge of the document style that will use the custom element.
Note that <pre> is just an example. Looking for a solution in general to make a customElement use a defined user style so that a customElement can be generic enough to be used in different pages with different stylesheets.
In Vaadin Flow (versions 10 and later), is there some way to dynamically change the font, font size, font color and such of the widgets in a Vaadin layout?
I do know the basics of CSS, but don’t know much about SASS or other supersets of CSS though I am willing to learn. And I do not know what supersets of CSS are being used by Vaadin Flow.
I know I can dynamically assign or remove CSS style names to a widget at runtime. But that means the CSS style must already be defined.
➥Is there some way to assign arbitrary font styling at runtime?
The short answer is yes. And this is one of the major changes between Vaadin Platform version 10 and later compared to Vaadin 8 and earlier. In Vaadin Platform theming is not based on SASS anymore.
The reason for this change is because we use web components to create the client "widgets", and web components are based on latest HTML5 standard. They introduce so called shadow DOM and local DOM concepts. I.e. the internals of the web components cannot be styled in global theme. So number of new concepts for theming is needed. Custom properties, themable mixins, etc. We have chapter in our documentation describing this in detail.
Your particular question can be addressed with CSS custom properties. They are basically CSS variables, and have notation --my-property. There is example in documentation how to add custom properties to custom widgets. Values of these custom properties can be defined in global styles and/or run time via Element API of Flow element.getStyle().set("--my-property", "red");.
Also those styles that are exposed naturally can be modified run time using Element API element.getStyle(), like element.getStyle().set("fontWeight", "bold");
So in general Vaadin Flow offers much more features for dynamic styling than Vaadin 8 ever did.
See also: Vaadin Flow/10/11 style component via css
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.
I've written a few Polymer components so far and for my more complicated stuff I love how their styling is isolated from the rest of the page. It's been much easier to use them across multiple apps.
However, today I'm creating a super simple component, and I'm realizing that I'd really like to have the page's styles bleed in. I've got a component that packages up a bunch of logic, but just renders a basic <a href> link. Is it possible through CSS or other means to have that link inherit its styling from the rest of the page?
appyAuthorStyles used to be great for this. Unfortunately, it's no longer in the Shadow DOM spec.
Your two solutions are:
Create a small stylesheet (e.g. shared.css) that includes the common rules the page and component use.
Use ::shadow and /deep/ to style the link from the outside, the same way as the page styles its links.