Polymer components about design-blocks HOT 8 OPEN

We can choose to build components on Polymer or build vanilla wc components (example)

from design-blocks.

@cborodescu I think #24 would be a big step in this direction.

from design-blocks.

@equinusocio I believe it would be better to go with the web components as you already suggested in the other issue. That would make everything framework agnostic and can be integrated quickly with other front-end frameworks.

from design-blocks.

@stefanneculai the problems are the external dependencies. The shadow dom provide css encapsulation but it does not allow you to use global css, so everything must be inside the component itself.

from design-blocks.

I think there are 3 ways we could go:

1. Web components and import the global style (bootstrap + other styles for Design Blocks) using @import "our_style.css" inside each component. The problem with this is that it's not recommended to do it.
2. Create custom elements instead of web components. We wouldn't use the Shadow DOM this way, there would be a single global style, but we can easily enable Shadow DOM further on when web components would support shared style.
3. Use a library like Polymer. This would add some overload for loading the lib.

I believe the best approach, at least for now, would be 2. @equinusocio how to you see it?

from design-blocks.

@stefanneculai

1. Using CSS imports is a bad choice and it is anti-pattern.
   🚨 Very bad. 😊

2. Shadow Dom will never support shared styles, is anti-pattern. It provide css encapsulation, kill global scope, theming, make self-contained and reusable components... sacrificing global styles. There is a proposal to implement ::part and ::theme to define css entry points inside a shadow tree, so you can style component parts easily from outside (instead using only custom-properties). But it's just a proposal. Note that switching to Shadow DOM you can't use bootstrap. Since pure Web Components are framework-agnostic you can't use a framework inside them, or you have to include it in each component. So you will have Bootstrap included in every components... it's not really cool.
   🚨 You gain custom elements but you lose the Shadow Dom advantages
   🚨 With Shadow DOM you lose Bootstrap

3. Since you will have to remove bootstrap you can replace it with Polymer (v3). The v3 is very similar to vanilla Web Components + Shadow DOM with some extra features. But the ui kit will not be framework-agnostic.
   🚨 You lose bootstrap but you gain Polymer 3 and Shadow Dom.

PS: Losing bootstrap is not so bad 😅.

With Shadow DOM you lose global style, not shared style. You can always define a common style, like common-button.css and import it inside the <blocks-button> web component style. But for each component that import the <blocks-button> component you will have the same css code inside them. You have one edit point (text-inpunt.css) but multiple outputs (inside each component).

A sample structure:
/my-button
├— style.postcss
├— index.js (import postcss and define template)

from design-blocks.

@equinusocio at 2, I was saying about using Custom Elements without Shadow DOM. This way, we can have still one main global style, but keep code more modular. Of course, we would lose the isolation.

Which way would you go?

from design-blocks.

Going for 2, the only gain are a shiny well-named custom elements and polyfills. But is the only way that can be framework-agnostic.

What about to build more version? Polymer 3, React and web components . Using the same CSS/HTML and rewriting the js? (just a thought)

PS: @stefanneculai Please move discussion to #24 :)

from design-blocks.