https://github.com/ianes1978/lit-element-webpack-starter
webcomponent starter with and without external CSS (Bootstrap)
https://github.com/ianes1978/lit-element-webpack-starter
bootstrap lit-element starter-kit webcomponents
Last synced: 2 months ago
JSON representation
webcomponent starter with and without external CSS (Bootstrap)
- Host: GitHub
- URL: https://github.com/ianes1978/lit-element-webpack-starter
- Owner: ianes1978
- License: mit
- Created: 2020-03-31T16:13:18.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T18:06:04.000Z (over 3 years ago)
- Last Synced: 2025-10-29T23:51:21.735Z (8 months ago)
- Topics: bootstrap, lit-element, starter-kit, webcomponents
- Language: JavaScript
- Homepage:
- Size: 1.05 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# lit-element webcomponent starter JS (+Bootstrap)
version Javascript of [lit-element webcomponent starter TS](https://github.com/ianes1978/lit-element-webpack-starter-typescript)
## intro
This is a simple starter of a webcomponent builded with lit-element library and webpack bundler.
## first-component
example of naked webcomponent
## bs-component
A component that load from external css a global style.
**But preserve the shadowdom for scoped style**.
I think can be usefull to create a library of webcomponent that have to ereditate the global style.
## webcomponents-loader.js is a polyfill for webcomponents
webcomponents-loader.js is a polyfill for webcomponents
*in index.html:*
```
// Take care of cases in which the browser runs this
// script before it has finished running
// webcomponents-loader.js (e.g. Firefox script execution order)
window.WebComponents = window.WebComponents || {
waitFor(cb) { addEventListener('WebComponentsReady', cb) }
}
WebComponents.waitFor(async () => {
await import('./main.js');
});
```
## lit-css-global-scope
it is a simple module to import global style, you can replace with a simple script if you want:
```
import { css } from 'lit-element';
const styleRules = Object.values(document.styleSheets).reduce((obj,styleSheet)=>{
return obj = [...obj,...Object.values(styleSheet.cssRules)]
},[])
let externalStyles = styleRules.map(rule=>rule.cssText).join('\n');
externalStyles = externalStyles.replace(/html {/g,":host {");
externalStyles = externalStyles.replace(/@import/g,"/@import");
externalStyles = css([externalStyles]);
export {externalStyles};
```
# Use it
### Project setup
```
git clone https://github.com/ianes1978/lit-element-webpack-starter.git
npm install
```
### Compiles and hot-reloads for development
```
npm start
```
### Compiles and minifies for production
```
npm run build
```