https://github.com/romaleev/reflect-stencil
Stencil Web Components with Shadow DOM
https://github.com/romaleev/reflect-stencil
e2e-tests shadow-dom stencil stenciljs stenciljs-components typescript webco
Last synced: about 1 year ago
JSON representation
Stencil Web Components with Shadow DOM
- Host: GitHub
- URL: https://github.com/romaleev/reflect-stencil
- Owner: romaleev
- License: mit
- Created: 2020-03-15T12:24:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T10:12:43.000Z (over 3 years ago)
- Last Synced: 2025-01-31T22:09:39.966Z (over 1 year ago)
- Topics: e2e-tests, shadow-dom, stencil, stenciljs, stenciljs-components, typescript, webco
- Language: TypeScript
- Homepage:
- Size: 864 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Stencil Assignment
## Passion
`Stencil` is a really nice tool for building and maintaining of web components.
Pretty impressed how fast it can be learned as well as how many integrations it has.
Also I find fascinating `Shadow DOM` feature, which makes you components fully isolated (HTML, JavaScript, CSS) and accessible only through documented public methods.
Added form animation on successful submit.
## Assignment
- the form should be unaware of the component's multiple separate input
fields, the input should be accessible as a single, combined value.
- the form should only be submittable when the combined value passes a
self-chosen pattern / validation.
- basic input behaviour / state should apply (e.g. disabled, required).
## Getting Started
To run the task for development, run:
```bash
npm install
npm start
```
To build the components for tests and production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```
## Notes
### Estimation of working hours
Most of the time I spent for learning how to develop with Stencil and related challenges.
- Read Stencil documentation - 1h
- Implement From and Input components - 2h
- Implement Styling - 1h
- Add Unit and E2E tests - 1h
- Fixing bugs and other challenges - 1h
### Attention points
- Component documentation
- Components and classes namings
- Components are fully isolated using Shadow DOM
- Styles are constructed with Sass and easy adjustable using variables
### Improvements
- From the UX perspective in my opinion better:
- Submit button should be always active
- Validation happens on submit
- Better performance - validation happens once instead of per every keypress
- On Submit click with invalid inputs:
- focus on first invalid input
- show validation captions per every input
- Add CSS cross-browser compatibility (e.g. with Webpack plugins)
### Challenges / Todo's
- Investigate why globalStyles are not applied in `stencil.config.js` (used `index.html` inline styles instead)
- Investigate how to get node with Input invalid class: `expect(inputName).toHaveClass(':invalid')` in `reflect-input.e2e.ts`