Fix issue 22887: Rewrite web components guide

[wbamberg]

Fixes #22887, I hope.

This ended up being much more involved than I was anticipating. As #22887 (comment) pointed out, if we want to use connectedCallback() we have to reorganize things so as to introduce that first. And once I started doing that it seemed like it would be cleaner to do all the explaining and then have the examples. I wish that mdn/yari#7198 were fixed, so the example titles appeared in the ToC.

Anyway, I hope this all still makes sense. I don't know much about web components. @chrisdavidmills , would you mind taking a look?

Oh BTW there will be a corresponding PR in https://github.com/mdn/web-components-examples.

[github-actions]

Preview URLs

• /en-US/docs/Web/API/Web_components/Using_custom_elements

External URLs (6)

URL: /en-US/docs/Web/API/Web_components/Using_custom_elements
Title: Using custom elements

• https://html.spec.whatwg.org/multipage/custom-elements.html (2 times) (Note! This may be a new URL 👀)
• https://mdn.github.io/web-components-examples/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/web-components-examples/expanding-list-web-component/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/web-components-examples/life-cycle-callbacks/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/ (1 time) (Note! This may be a new URL 👀)
• https://mdn.github.io/web-components-examples/popup-info-box-web-component (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-09-25 22:27:03)

[chrisdavidmills]

Nice work @wbamberg; this is looking much improved, and it largely makes sense. I just had a few comments for you to respond to.

[wbamberg]

Thank for for the review Chris! Updates are in f36ea54.

[chrisdavidmills]

Perfect, cheers @wbamberg!