Comments (6)
The only limitation for now with styling is related to the shadycss
project. if you want to support all major browsers, you have to use it. In the Browser Support section I added a link to web components shims limitations. Here you have links to topics I think you are interested in:
:host
selector limitations: https://github.com/webcomponents/webcomponentsjs#shadycss-hostzotnotbarnth-child2-doesnt-work-<slot>
styling limitations: https://github.com/webcomponents/shadycss#selector-scoping
Moreover, there is yet another type of limitation related to html
module of the hybrids library (I will add this to the README soon). ShadyCSS is moving out the style element from DOM, to make possible CSS encapsulation. If you use expression inside of the <style>
element, with ShadyCSS applied, it doesn't work and breaks templates.
const MyElement = {
color: 'black',
render: ({ color }) => html`
<style>:host { color: ${color}; }</style>
...
`,
It is a powerful concept to create more complex dynamic styles, but it actually works only in Chrome and Safari (with native Shadow DOM). However, it is also not efficient (as the browser has to recalculate styles for element instance, not a family of elements).
Please, tell me if I can help you more with this subject.
from hybrids.
It might be a good idea :) so after style attribute I will add an example with static style element as a different solution for styling.
I knew that in Firefox web components are available behind flags, but when I checked issues, there was some bugs there. It's great news, that they are going to ship it finally! 🎉
from hybrids.
Yes i know about the ShadyCSS limitations (i use it everydays with polymer 2/3). Sorry if my first issue was not clear. My concern was about telling users that inline styles (as the readme file shows) is not a best practices for Web Components, that is a react-ish CSS-in-JS solution ...not required here. I think that "pushing" a native solutions (without polyfills) is better that telling to use inline style..
BTW, i tested with the latest Firefox that introduce web components support and all works as expected.
from hybrids.
In the case of styling the library provides all available possibilities, including inline styling and creating static CSS in style elements. It should stays like this. One can say that inline styling is better, another opposite. It is up to the user of the library.
However, I will definitely add notice about expressions inside of the style element, as they just don't work with ShadyCSS shim.
BTW, i tested with the latest Firefox that introduce web components support and all works as expected.
What version of Firefox did you use?
from hybrids.
One can say that inline styling is better, another opposite. It is up to the user of the library.
You right, but maybe adding an example with <style></style>
can help people knowing the library possibilities
What version of Firefox did you use?
Firefox Nightly (62.0a1) and Developer Edition (61)
Since Firefox will completely support Web Components and Shadow Dom from v62 (v61 will support custom elements) you can already enable the flags in the about:config page, just search for webcomponents. You can test almost everything.
from hybrids.
@equinusocio I opened PR #7, so you might want to check it. Please comment in PR if there is something, that could be written better.
from hybrids.
Related Issues (20)
- Add a helper for assigning component properties HOT 3
- Dynamic columns not showing when render a html table HOT 4
- '"hybrids"' has no exported member named 'property'. Did you mean 'Property'? HOT 8
- Add support for "TypeScript v5" HOT 3
- I can't create an arbitrary number of nested forms: HOT 6
- Small Type Inferencing Issue with Property<E, V> HOT 6
- Cannot pass an object to the API via the "list" method HOT 7
- version 8.2.17 backwards compatibility is broken! HOT 9
- Expand the functionality of drafts
- sync() with nested models is broken HOT 4
- Allow storing an object in a component property HOT 4
- Add partial loading of model data HOT 3
- Why do you remove the lastValue? HOT 2
- The store logs a lot of errors HOT 4
- Convert a Whole Component to Web Component HOT 8
- Scoped CSS HOT 6
- lagging update glitch HOT 2
- Component properties cannot be setted until they are observed HOT 2
- `store.set()` is very slow HOT 5
- Store loads items data when iterating the list of items HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hybrids.