https://github.com/moonhuntercode/web-components-with-es6-vitejs
template for modern version of web components- with custom elements v1 and es6 modules
https://github.com/moonhuntercode/web-components-with-es6-vitejs
css3 custom-elements custom-elements-v1 frontend-web html5 vanilla-javascript web webcomponents
Last synced: 2 months ago
JSON representation
template for modern version of web components- with custom elements v1 and es6 modules
- Host: GitHub
- URL: https://github.com/moonhuntercode/web-components-with-es6-vitejs
- Owner: moonhuntercode
- Created: 2022-06-14T04:01:30.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-17T03:56:33.000Z (almost 2 years ago)
- Last Synced: 2025-07-27T04:51:03.931Z (11 months ago)
- Topics: css3, custom-elements, custom-elements-v1, frontend-web, html5, vanilla-javascript, web, webcomponents
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Web components](https://www.webcomponents.org/introduction) with [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements) + [es6 modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) + [vitejs](https://vitejs.dev/) + your perfect [polyfills](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs#how-to-use)
## [Custom Elements](https://www.webcomponents.org/introduction#custom-elements)
The Custom Elements specification lays the foundation for designing and using new types of DOM elements.
## [ES Modules](https://www.webcomponents.org/introduction#es-modules)
The ES Modules specification defines the inclusion and reuse of JS documents in a standards based, modular, performant way.
---
### [How do I use a web component?](https://www.webcomponents.org/introduction#how-do-i-use-a-web-component-)
---
## Polyfill
Un polyfill es un fragmento de código (generalmente JavaScript en la Web) que se utiliza para proporcionar una funcionalidad moderna en navegadores antiguos que no lo admiten de forma nativa, y para dar soporte a otros navegadores.
## [Browser Support](https://github.com/webcomponents/polyfills/blob/master/packages/webcomponentsjs/README.md#browser-support)
The polyfills are intended to work in the latest versions of evergreen browsers. See below
for our complete browser support matrix:
| Polyfill | Edge | IE11+ | Chrome\* | Firefox\* | Safari 9+\* | Chrome Android\* | Mobile Safari\* |
| --------------- | :--: | :---: | :------: | :-------: | :---------: | :--------------: | :-------------: |
| Custom Elements | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Shady CSS/DOM | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
## TO DO
- ✅⚔️ : refactoring in css
- ✅⚔️ : modularization with css aplied
- ✅⚔️ : nesting in css
- ❌⚔️ : refactoring in first web component
- ❌⚔️ help with this: aplicar Asynchronous webcomponents-loader.js
- The WebComponents.waitFor
- with multiples components added
- ❌⚔️ : pensando usar como routing esto: https://github.com/colscott/a-wc-router