Improve readability for 'simple-template' example

[ngdangtu-vn]

trafficstars

My issue relate to: https://github.com/mdn/web-components-examples/tree/712ce27cd5b3c894ebc9b9958ec0973e3e86157b/simple-template

My point is the custom-element name and the template id name is the same that confused for anyone start to read from main.js file. I would like to replace <template id="my-paragraph"> to <template id="template-for-my-paragraph">.

If you guy think it is a right way, I would like to make my PR to this repo.

[bsmth]

Hi @ngdangtu-vn - thanks for reporting this. I agree it would be nice to disambiguate them. Alternatively, a different custom name, like:

customElements.define('custom-p-element',
...
// or 
customElements.define('styled-para',
...

Bear in mind if we change this here, we'll have to rename it in the docs that reference the example:

• https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
• https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/get
• https://developer.mozilla.org/en-US/docs/Web/API/Element/slot
• https://developer.mozilla.org/en-US/docs/Web/API/Element/assignedSlot

[ngdangtu-vn]

How should I update those MDN articles? Should I update the doc (https://github.com/mdn/content/tree/main/files/en-us/web/api) first or example (this) first?

[bsmth]

Lets update the examples here first and we can look at the MDN pages when we're ready. So this might be the best way:

1. open a pull request here with the changes, when that looks good (not necessarily merged):
2. open a pull request in mdn/content to update the pages listed above.

I can help with the reviews for these. Does that sound good? :)

[ngdangtu-vn]

Sound good, give me one or two days.