This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
| web_component [2024/09/02 17:23] admin created | web_component [2024/10/09 22:52] (current) admin | ||
|---|---|---|---|
| Line 3: | Line 3: | ||
| ## Basic concept | ## Basic concept | ||
| * **npm**: npm is a package manager for the JavaScript programming language maintained by npm, Inc., a subsidiary of GitHub. npm is the default package manager for the JavaScript runtime environment Node.js. `package.json` is the file you put at the root path of your project, you use to tell npm what package to install in this folder, it also contains project information. | * **npm**: npm is a package manager for the JavaScript programming language maintained by npm, Inc., a subsidiary of GitHub. npm is the default package manager for the JavaScript runtime environment Node.js. `package.json` is the file you put at the root path of your project, you use to tell npm what package to install in this folder, it also contains project information. | ||
| - | * **lit**: The “lit” package is a library for building fast, lightweight web components. It provides developers with tools to create web components that are both efficient and easy to use. | + | * **lit**: https://lit.dev The “lit” package is a library for building fast, lightweight web components. It provides developers with tools to create web components that are both efficient and easy to use. It is one of the libraries for building web-component. | 
| + | |||
| + | |||
| + | ## Learn | ||
| + | |||
| + | 1. "hello world" example of lit. https://lit.dev/playground/ | ||
| + | 2. Web component vs React. https://blog.jim-nielsen.com/2023/html-web-components-an-example/ | ||
| + | 3. <template> tag: The <template> HTML element serves as a mechanism for holding HTML fragments, which can either be used later via JavaScript or generated immediately into shadow DOM. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template | ||