how-to-create-html-web-components-with-dart
How to create HTML Web Components with Dart
I am a long time Web Components fan (since helping DevRel lit.dev and Material Web Components) and have also loved writing Dart in both Flutter applications and full stack apps.
Despite being used at so many companies, Web Components have faced a lot of pushback from JavaScript developers that use frameworks to target the web. ☹️
What you may not realize is that the web has a way to create new HTML tags that can be used in ANY JS framework or place that returns HTML and you can progressively enchance applications. 🤩
Since they are custom HTML tags, if you swap implementations, you do not need to update where it is used and you can ship components a separate files instead of one big bundle.
Dart used to support Web Components at one point and was even used by a precursor to Lit in a product call Polymer.
Creating a Web Component in Javascript
To create a web component in Javascript you just need to extend HTML element and provide callbacks for when the component is mounted.
More from rodydavis/skills
flutter-control-and-screenshot
Guide on how to control a Flutter app using flutter_driver via MCP and capture screenshots.
197how-to-build-a-native-cross-platform-project-with-flutter
Learn how to import `dart:html` and `dart:io` in the same Flutter project to create cross-platform plugins that work seamlessly on mobile and web.
59install-flutter-from-git
Install Flutter SDK via git clone and configure for all platforms
56how-to-build-a-webrtc-signal-server-with-pocketbase
Learn how to build a simple WebRTC video call application using PocketBase as a signaling server, enabling peer-to-peer communication with SQLite on the server and realtime updates via Server Sent Events.
55how-to-do-full-text-search-with-sqlite
Learn how to supercharge your SQLite databases with full-text search capabilities using the built-in fts5 extension, enabling efficient and powerful querying with the `MATCH` keyword.
55flutter-fastlane-one-click-beta
Deploy your Flutter app to the App Store and Google Play with ease using this step-by-step guide covering installation, project setup, Fastlane integration, and automated deployments with Automator.
55