> You can use isolated JS scripts, or other approaches like progressively-enhanced web components
How would one use "progressively enchanced" web components? Maybe I misunderstand the intention behind this statement, but web components are either supported or not. There doesn't seem to be some kind of progression.
Given custom elements are pretty widely supported by browsers now, I assume you are referring to js being turned off.
In terms of designing for that situation - you can follow a pattern where your custom element wraps ( <custom-ele><stdelement></></> ) the element you want to enhance. If js is turned off, then the custom element defaults to rendering it's contents....
Yep, that's the ideal approach for decent browsers. A curious caveat is that IE 8 and below will interpret that example HTML as <custom-ele></><stdelement></> (ie. as siblings, not parent and child) and therefore not apply any component-scoped styles. Not ideal.
Of course nobody uses those browsers anymore, the same caveat applies to non-custom HTML5 elements, and the bad behavior has long been preventable with JavaScript [0]. But anyone (else) with an extreme backwards compatibility mindset might consider if they could instead bootstrap from <div class="custom-ele"><stdelement></></> and (if needed and in window) a coordinating MutationObserver.
> You can use isolated JS scripts, or other approaches like progressively-enhanced web components
How would one use "progressively enchanced" web components? Maybe I misunderstand the intention behind this statement, but web components are either supported or not. There doesn't seem to be some kind of progression.
Given custom elements are pretty widely supported by browsers now, I assume you are referring to js being turned off.
In terms of designing for that situation - you can follow a pattern where your custom element wraps ( <custom-ele><stdelement></></> ) the element you want to enhance. If js is turned off, then the custom element defaults to rendering it's contents....
https://simonwillison.net/2022/Apr/21/web-components-as-prog...
Yep, that's the ideal approach for decent browsers. A curious caveat is that IE 8 and below will interpret that example HTML as <custom-ele></><stdelement></> (ie. as siblings, not parent and child) and therefore not apply any component-scoped styles. Not ideal.
Of course nobody uses those browsers anymore, the same caveat applies to non-custom HTML5 elements, and the bad behavior has long been preventable with JavaScript [0]. But anyone (else) with an extreme backwards compatibility mindset might consider if they could instead bootstrap from <div class="custom-ele"><stdelement></></> and (if needed and in window) a coordinating MutationObserver.
[0] https://web.archive.org/web/20091031083341/http://diveintoht...