Using external css libraries about hybrids HOT 5 CLOSED

I don't know what you mean by the difference between your CSS and bootstrap, however...

Let me start with some clarification. I assume you are using Webpack or some other bundler to include CSS files in your JS code. Usually, it works like this - in development mode, it includes <style> tag in the head of the document and in production mode produces one single CSS file, which should be linked in your html file. Am I right?

If so, let's go to the hybrids. render factory uses Shadow DOM, and put there generated template. As the Shadow DOM specification defines, it creates two-way boundary for styles. Global styles do not apply to elements inside of the Shadow DOM, and styles created inside of it does not apply to outside elements.

Regardless of the method, your CSS is included globally. It means that it is not a part of any of your component created with hybrids library.

This kind of code will not work (it might work in polyfilled version, but it is not intentional):

import { html } from 'hybrids';
import 'external/styles.css'; // with .external-class-name {...}

export default {
  render: () => html`
    <div class="external-class-name">...</div>
  `,
}

If you want to use bootstrap styles inside of your components, you should create a custom element for any kind of component, that bootstrap library defines. And the only way is to include those styles inside of the template of the component.

As the library does not support expressions inside of the style element, you cannot do this:

import { html } from 'hybrids';
import styles from 'external/styles.css'; // Some custom loader, which allows importing text content of CSS file

export default {
   render: () => html`
      <div class="external-class-name"></div>
      <style>${styles}</style> <!-- this does not work in polyfilled browsers -->
   `,
}

I am thinking of adding support for external CSS files, which now can be done in this way:

import { html } from 'hybrids';
import styles from 'external/styles.css';

const styleElement = html([`<style>${styles}</style`]);

export default {
   render: () => html`
      <div class="external-class-name"></div>
      ${styleElement}
   `,
}

Why is it works? html is just a function and tagged template literals is just a syntax, which produces a call to function with the first argument as an array and rest as expressions put in that template. styleElement is a nested template created with static text, without dynamic parts. It can be reused and put, where it is needed. So, you can create util, like bootstrapStyles.js with code:

// bootstrapStyles.js
import { html } from 'hybrids';
import styles from 'external/styles.css';

export default html([`<style>${styles}</style>`]);

// MyComponent.js
import { html } from 'hybrids';
import styles from './bootstrapStyles'; // nested template with style element

export default {
   render: () => html`
      <div class="external-class-name"></div>
      ${styles}
   `,
}

However, be aware, that your CSS import should return the text content of the CSS file.

from hybrids.

I'm making two imports

import './css/bootstrap.css';
import './EntradaComponent.css';`

Bootstrap import doesn't work, while my css works.

from hybrids.

Okay, at least now I know what I can do, ty very much!
Another thing, do you plan on having a release date schedule, a roadmap or something?
Hybrids has really caught my eye because the aproach is really simple and in my opinion it’s something that web components must be, something simple and really plug n play.

from hybrids.

I was working on the library more than a year, in which I was trying to create public API, that survive and will not be changed soon after public release. In my opinion, it is mature and will not change much in the near future.

For now there is no strict release plan, or schedule for updates. Since I am the only main contributor of the code, I think it is not required. What I want to do in the next months is to release a package with web components, which can be a base for creating web applications with filling of the native mobile apps. The second thing is naturally spreading news about the library.

Of course anyone is welcome to create an issue with suggestions, bugs or proposals for new features. If there will be a lot of them, the schedule for implementing those for sure will be helpful :)

from hybrids.

Starting from v2.0.0 library supports passing CSS content by the style helper. You can find more information here https://hybrids.js.org/template-engine/styling#css-stylesheet

from hybrids.