https://github.com/costineest/stencil-with-maximilian

Web Components & Stencil.js
https://github.com/costineest/stencil-with-maximilian

stenciljs stenciljs-components udemy-course webcomponents

Last synced: 2 days ago
JSON representation

Web Components & Stencil.js

• Host: GitHub
• URL: https://github.com/costineest/stencil-with-maximilian
• Owner: costinEEST
• Created: 2024-04-26T15:34:57.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-30T18:05:52.000Z (over 1 year ago)
• Last Synced: 2025-02-12T18:19:48.104Z (8 months ago)
• Topics: stenciljs, stenciljs-components, udemy-course, webcomponents
• Homepage: https://www.udemy.com/course/web-components-stenciljs-build-custom-html-elements
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Dump 

- https://web.dev/articles/web-components

- https://developer.mozilla.org/en-US/docs/Web/API/Web_Components

- https://github.com/WebComponentsGuide/webcomponents.guide

- https://github.com/newbornfrontender/udemy-web-components-and-stencil

- https://www.newline.co/courses/fullstack-web-components + https://github.com/readymade-ui/fullstack-web-components + https://www.youtube.com/watch?v=VEohjUkyFGU

- https://bpbonline.com/products/exploring-web-components + https://github.com/bpbpublications/Exploring-Web-Components

- https://github.com/web-padawan/webcomponents.today

- https://github.com/web-padawan/awesome-web-components

- https://www.manning.com/books/back-to-simple-css

- https://leanpub.com/web-component-essentials + https://webcomponent.dev + https://www.youtube.com/playlist?list=PL5na4Y3USpjEnptCE1nvq73Q8AwhSODz2 + https://coryrylan.gumroad.com/l/web-component-essentials + https://coryrylan.gumroad.com/l/web-component-essentials-book + https://github.com/coryrylan/forms-on-the-modern-web + https://coryrylan.com/blog/high-performance-html-tables-with-lit-and-css-contain

- https://www.manning.com/books/web-components-in-action + https://github.com/bengfarrell/webcomponentsinaction + https://www.youtube.com/@webcomponentsinspace/playlists?view=1&sort=lad&flow=grid + https://dev.to/bengfarrell/recordable-canvas-web-component-3nm7 + https://github.com/orgs/Web-Components-in-Space/repositories?type=all

- https://github.com/webcomponents/custom-elements-everywhere + https://www.zachleat.com/web/good-bad-web-components

- https://github.com/Matsuuu/custom-elements-language-server

- https://github.com/orgs/24webcomponents/repositories?type=all + https://www.youtube.com/playlist?list=PLJC1CIi0zsoqmxMHeUYxudg2QQUiu4JOh

- https://github.com/Matsuuu/web-component-devtools

- https://knowler.dev/blog/declarative-custom-elements-should-take-inspiration-from-css

- https://knowler.dev/blog/a-mental-model-for-styling-the-shadow-dom

- https://github.com/knowler/break-on-element

- https://github.com/knowler/log-form-element

- https://github.com/open-wc/locator

- https://github.com/node-projects/web-component-designer

- https://github.com/github/relative-time-element

- https://github.com/google/model-viewer

- https://github.com/web-padawan/vanilla-colorful

- https://github.com/GoogleChromeLabs/dark-mode-toggle

- https://github.com/arnog/mathlive

- https://github.com/nolanlawson/emoji-picker-element

- https://github.com/jhildenbiddle/css-vars-ponyfill

- https://github.com/github/custom-element-boilerplate

- https://github.com/googlemaps/extended-component-library

- https://bluespire.com/p/web-component-engineering + [https://eisenbergeffect.medium.com/announcing-the-web-component-engineering-course-presale-3e2169183859 + Web Test Runner for unit tests and Playwright for e2e tests](https://twitter.com/EisenbergEffect/status/1737143663728169231)

- https://github.com/WickyNilliams/cally

- https://github.com/andreasbm/lit-translate

- https://www.npmjs.com/package/wc-storybook-helpers

- https://www.npmjs.com/package/custom-elements-manifest-deprecator

- https://github.com/toeverything/blocksuite

- https://fullystacked.net/sharing-styles-between-shadow-dom

- [Creating and importing styles with constructable stylesheets and CSS module scripts](https://fullystacked.net/constructable/)

- https://dev.to/stuffbreaker/dark-mode-in-web-components-is-about-to-get-awesome-4i14

- https://react.dev/blog/2024/04/25/react-19#whats-new-in-react-19 + https://github.com/webcomponents/custom-elements-everywhere/pull/2351

- https://scottjehl.com/posts/polyfilling-with-wcs/

- https://thedesignsystem.guide/interview-ariel-salminen

- https://github.com/daviddarnes/link-peek

- https://sh.reddit.com + https://twitter.com/addyosmani/status/1677790748719325185

- https://github.com/mdn/web-components-examples

- [two new APIs that allow the declarative shadow DOM to be used from JavaScript](https://developer.chrome.com/blog/new-in-chrome-124/#dsd)

- https://github.com/shoelace-style/shoelace, fastest approach using web components

- [Eleventy's newest plugin enables developers to write single file components to include web components, templates, and shadow DOM in our sites. Zach Leatherman shows us how to use WebC](https://www.youtube.com/watch?v=rD07m-uAGaE)

- https://github.com/hawkticehurst/stellar + https://fosstodon.org/@hawkticehurst/111507538341466399 + https://hawkticehurst.com/writing/12-days-of-web-components/day-6/

- [Minimalistic Web Components with SSR Support](https://github.com/loreanvictor/minicomp)

- https://eduardmoldovan.com/not-posts/detailed-example-of-web-components-usage + https://naildrivin5.com/blog/2024/01/24/web-components-in-earnest.html

- https://www.youtube.com/playlist?list=PL37ZVnwpeshFFbc7hknsfN15lelTPv1sW + https://www.youtube.com/playlist?list=PLG-wJSjG-JpkGsqLGYXbmjl7btpi3ZiWf

- https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript, use of Declarative Shadow DOM

- https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/

- https://github.com/thepassle/swtl + https://github.com/thepassle/blog

- [A collection of generic web components with a focus on accessibility, and ease of use ](https://github.com/thepassle/generic-components)

- https://blog.westbrookjohnson.com/patterns/adopted-style-sheets/

- https://github.com/node-projects/web-component-designer

- [WebComponents.dev is an component-oriented online IDE](https://webcomponents.dev/docs)

# Course content

- [x] Introduction:

  - [x] [Web Components - A Quick Demo](https://stackblitz.com/edit/modal-web-component-max)

- [x] Refreshing Next Generation JavaScript (Optional)

- [x] Understanding the basics:

  - [x] What are web components?

    | Feature             | Description                                                                                                                                         |

    | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |

    | Custom HTML Element | Register your own HTML Tags                                                                                                                         |

    | Shadow DOM          | Manage a separate DOM node tree for your HTML elements (including scoped CSS styles)                                                                |

    | Templates & Slots   | Write HTML templates that you can add to your HTML elements                                                                                         |

    | HTML Imports        | Although this feature was initially part of the Web Components spec, it has been deprecated in favor of ES Modules (JavaScript `import` statements) |

  - [x] [Browser support](https://www.webcomponents.org)

  - [x] [Creating our first custom element](https://stackblitz.com/edit/tooltip-web-component-max)

    - [The name of the element must start with a lowercase letter, contain a hyphen](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)

  - [x] Understanding the custom element lifecycle 

    - https://webcomponents.guide/learn/components/lifecycle-reference

  - [x] Using the Shadow DOM

    - https://developer.chrome.com/docs/css-ui/declarative-shadow-dom

    - https://www.konnorrogers.com/posts/2023/what-is-declarative-shadow-dom

    - https://www.mayank.co/blog/declarative-shadow-dom-guide

    - https://news.ycombinator.com/item?id=34778224

    - https://news.ycombinator.com/item?id=39598211