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
Related
My Razor component populates a number of divs to a container.
Is it possible to inherit the table-stripe color and apply it to my divs (odd) rather than overriding it?
Or, if I declared a new CSS class "Div-Stripe-Row".
Is it possible to reference the background-color from Bootstrap's table-striped background-color (use what's already there) rather than declaring a new color (overriding it by just copying what the color is)?
Your question may be a duplicate of this one.
Unless you want to use LESS, I would recommend adding a class to those divs and copy the styles of the Razor component to that class.
Unfortunately, CSS does not provide 'inheritance' in the way that programming languages like C++, C#, or Java do. You can't declare a CSS class and then extend it with another CSS class.
However, you can apply more than a single class to a tag in your markup ... in which case there is a sophisticated set of rules that determine which actual styles will get applied by the browser.
See https://stackoverflow.com/a/1065476/3842598
The accepted answer says:
There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.
Less calls these "Mixins"
...
See https://stackoverflow.com/a/1065476/3842598
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.
I have a large project, structuring its CSS architecture via ITCSS. All in all, I love it. However, I have one issue when styling forms.
I've styled different form elements in my elements layer:
in forms.scss:
input[type="text"], input[type="password"] {
// sexy element styles
}
However, if I have a component that needs different styling:
in foo_component.scss:
.c-foo__text, .c-foo__password {
// sexy component styles
}
Due to the selectivity of the input type in forms.scss, my component styles in foo_component.scss do not override the element styles in forms.scss.
The current refactor I'm thinking of is changing forms.scss to an object:
form_object.scss refactor:
.o-form__text, .o-form__password {
// sexy object styles that will be overwritten by the lower component
}
I was wondering if this is a proper convention, or is there a better solution?
The main issue is caused by the fact you're declaring a very specific styling (input[type="text"]) in forms.scss quite hight in the specificity graph.
In the ITCSS, we start with the most generic styles and we end with the most explicit ones.
Moreover, lets look at the inverted pyramid layers:
I believe in the perfect case scenario you should apply your logic in the Generic, Base and the Components layers.
So, based on all this, having only the limited info you shared - I would advice you to refactor it this way:
Form styling in the Generic layer: Move any form / input related reset styles here. Use only global resets (like normalize.css or reset.css). These are ground zero styles. You could use a specific selector like input[type="text"], but only to reset style, not to add theme or anything related.
Form styling in the Base layer: Unclassed form elements comes here. Apply generic form or input styles here, that are shared across all elements. Do not use selector like input[type="text"] to style something that you would want to change on another element. Place only common styles here.
Form styling in the Components layer: Here is where your UI styles should be placed. Consider moving the // sexy element styles you're talking about here, assigning them to a class, like .form-control let's say. Below this class, add your other more specific class / UI modifiers.
In conclusion, note, that the decision depends from your specific use-case. There is no hard convention that can solve your issues. You need to make a decision based on all the project info you have. Different approaches would make sense in different stylesheet set-ups.
Anyways, if anything else fails, you could always reach ot to the Trumps layer :-)
I'm developing a multi-module application using GWT 2.5.1. I'm not using any GWT theme. I want to customize the style for some of the GWT widgets, for example Button and CheckBox.
I see two solutions:
Write a CSS file loaded in the application (link in the HTML page). The CSS will contain CSS rules using GWT defined names, like .gwt-Button for buttons and .gwt-CheckBox, .gwt-CheckBox-disabled for checkboxes. This solution don't takes the advantage of CSS optimizations made by the GWT compiler.
Use a CssResource and set the style name each time I use a Button or a Checkbox. This solution will take advantage of CSS optimizations but it requires to set the style name every time I create a new Widget.
There are other solutions? Which is the correct one?
You can put those styles in a CssResource as well.
Just put #external on top of those styles in your css file, and you are good to go.
For example:
#external gwt-DatePicker;
.gwt-DatePicker {
...
}
Hope it helps.
Other solution: Button is html element button and Checkbox an html element input[type=checkbox]. So you could set styles on those elements and use css selectors for specific states. i.e. button:disabled. That way you won't have to set style names, or don't have lots of extra style names and use cleaner css.
You could subclass whatever widgets you want to style (e.g. MyButton), and have your subclass either just add a style name to each widget that gets created, or do the styling inline using calls to this.setWidth(), this.getElement().getStyle.setXXX.
Also, what optimizations does the GWT compiler perform on CSS? I know that it will obfuscate style names to avoid collisions, but I'm not sure CSS is even able to be optimized?
I would personally use emanuele's solution, but just to offer an alternative: you can use a widget's getElement() method to access style names directly, so if you really want to, you can override the style names with ones you created. This gets rather difficult, however, with larger widgets and panels that have multiple styles.
I have made some templates on wikia.com, which contain only CSS code (key:value;).
My problem is having another template use these style templates in a style attribute tag.
style="{{MyTemplateStyle}}"
This code does not evaluate as expected. The CSS code is outputted before the element and the style attribute is not included inside the element.
Am I trying something not possible for a wiki ?
I merely want to be able to change styling on certain templates in one place, like regular HTML & CSS pages.
CSS styling specified from the style="" attribute always takes priority over any other css, even if you use !important in a CSS specification.
Therefore any edits you make to your CSS on Wikia will not ever override the CSS specified inside an attribute.
Kim, you were right to switch to classes instead of embedding in-line styles via templates.
The very idea of using templates suggest that this was going to be re-used in more than one place, applying styles to a group or, in fact, a class of elements.
This approach is much simpler to read and maintain (as you only have one, central place to edit), and also, if done right, will enable you to seamlessly change the colour scheme via Special:ThemeDesigner.