enhance-dev / enhance-dev/arc-plugin-enhance
`<my-card>` Component progressive enhancement example from docs yields client-side errors
- Dominant language
- JavaScript
- Stars
- 16
- Forks
- 11
- PR merge metrics
- No merged PRs in 30d
Description
I have a tiny repro repo here: https://github.com/filmaj/enhance-my-card-component
It takes [the Components docs page `@enhance/custom-element` example](https://enhance.dev/docs/conventions/components#%40enhance%2Fcustom-element) and wraps it in the enhance CLI w/ arc-plugin-enhance.
The dev server (`npm start`) output looks fine but when you open the browser dev console, the component attributes are said to be empty. Also the `titleChanged` callback seems to execute before the `connectedCallback`? Does that make sense?
Reproduction steps:
1. Clone https://github.com/filmaj/enhance-my-card-component
2. `npm i` and `npm start`
3. Load the URL
4. Dev server output looks good: `mycard render start, attrs: {"title":"hello world"}` - correct attributes as expected on the server.
5. Open browser console and note the errors, as well as order of the callbacks:
- The first log is the render function, and it has no attributes: ` mycard render start, attrs: {}`
- The second log is `titleChanged` callback: ` mycard titleChanged start`
- An exception occurs next: `Uncaught TypeError: can't access property "textContent", this.heading is undefined` - probably because the connected callback has not fired yet.
- The third log is the connected callback: `mycard connectedCallback start`
6. Does the order of these callbacks make sense?
Not an expert in web components or enhance, but I'm trying to progressively-enhance a component with some client-side JS only after a big client JS library is loaded, so the order of callbacks and availability of attributes is key.
Contributor guide
Assessment
This issue has not been assessed yet.