As per the request of @justinfagnani in the thread on use cases of DCE, I create a separate issue for the progressive enhancement DCE use case.

We use declarative custom elements as replacement for the former classical example of progressive enhancement: DOMContentLoaded + query selector + action, where the action is attaching an event listener or directly modifying the content on the element. Especially when you administrate many websites, you create reusable components that can be embedded in any website because custom elements are isolated. There are no cascading JS/CSS side-effects. So, custom elements can be inserted in websites made many years ago, without having to check surrounding code. So, it solves gradually replacing legacy code.

Typical examples are:

• website navigation
• user login / avatar
• user preferences
• badges (unread messages)
• sliders and marquee-alike objects

It involves elements that cannot have a FOUC, hence my interest in Declarative Shadow DOM adopted stylesheets, because they are essential elements that need to look good on first render and have their additional behavior progressively attached.

Moreover, these elements need to indexed by search engines and therefore their full markup must be part of the page. This involves also elements that are read-only when declaratively embedded in a webpage, and then, when the connectedCallback is fired, are upgraded (progressively enhanced) into an interactive element. An example is a feed of messages that is read-only on first render, but with JS activated becomes an element where the user can post messages.