`<my-card>` Component progressive enhancement example from docs yields client-side errors

[filmaj]

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 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.

[filmaj]

Follow-up here: not sure if this is an arc-plugin-enhance issue, or a enhance/custom-element issue. While the above repro and issue report is valid, if I continue to the end of the Components doc page and use the final @enhance/element example on the page, that example works.