https://github.com/bonji-396/notes-about-webcomponents
Web Componentsについての学習ノート。JavaScriptはもちろん、TypeScriptでの実装方法も記載。また、LitやStoryBook等での利用も今後追加していく予定。
https://github.com/bonji-396/notes-about-webcomponents
custom-elements html-template shadow-dom slot typescript webcomponents
Last synced: 6 months ago
JSON representation
Web Componentsについての学習ノート。JavaScriptはもちろん、TypeScriptでの実装方法も記載。また、LitやStoryBook等での利用も今後追加していく予定。
- Host: GitHub
- URL: https://github.com/bonji-396/notes-about-webcomponents
- Owner: bonji-396
- Created: 2025-03-15T19:09:24.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-30T20:08:24.000Z (6 months ago)
- Last Synced: 2025-03-30T21:20:52.673Z (6 months ago)
- Topics: custom-elements, html-template, shadow-dom, slot, typescript, webcomponents
- Language: JavaScript
- Homepage:
- Size: 39.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Components についてのノート
基本的に以下のURLを参照元としています。
https://developer.mozilla.org/ja/docs/Web/API/Web_components
さらに、実践で学んだことをノートしています。
- [About Web Components](docs/about-web-components.md)
- [Custom Elements](docs/custom-elements.md)
- [Shadow DOM](docs/shadowdom.md)
- [HTML Template](docs/html-template.md)
- [Slot](docs/slot.md)
- [擬似クラス](docs/pseudo-classes.md)
- [制約検証API（Constraint Validation API）を Web Componentsに取り込む](docs/constraint-validation-api.md)
- [Web Componentsのパフォーマンス](docs/web-components-performance.md)
### sample source
- [登録フォーム](sample_sources/javascript-version-registration-form/index.md)
## TypeScript で Web Components
- [TypeScript で Web Components（カスタム要素）を作成・利用する方法](docs/web-components-with-typescript.md)
### sample source
- [登録フォーム](sample_sources/typescript-version-registration-form/index.md)
## Web Compnents 開発ライブラリ
- Lit
## CSS設計とWeb Componentsでのアプローチ
- [CSS設計](docs/css-desgin/css-desgin.md)
- [Web ComponentsでのCSS設計](docs/css-desgin/css-design-for-web-components.md)