DCE support

[sashafirsov]

There multiple Declarative Custom Element implementations like @epa-wg/custom-element which allow to define the custom element by the tag attribute in HTML definition and provide attributes/parameters for it.

DCE needs IDE support and seems the cem-tools fits the bill. Only difference is that instead of JS hierarchy, the definition would come from HTML markup.

To create PR, need a hint on how to

• hook into HTML code changes in IDEs( VS Code & IntelliJ )
• propagate the DCE and parameters into cem-tools.

[break-stuff]

Do you know if there is any kind of proposal to get this info into the Custom Elements Manifest? That's how this is generated today.

[sashafirsov]

As front runner in DCE I have not created one :) DCE functionally is not relying on manifest, that would be handy only for toolchain HTML validation only for DCE libraries. As of now, there is no proposal on DCE libs either. As DCE is HTML inline entity, the global scope manifest is not really relevant. The CE equivalent for it would be inline <script> with CE definition.

Also, the CE manifest would be identical to DCE, no special proposal needed.

[sashafirsov]

@break-stuff ,

Custom Elements Manifest ... That's how this is generated today. I guess it is your advise. To sync HTML with manifest.

Which is strange as IntelliJ does not read it so far. At least you did not mentioned that in WEB-49361 Support Custom Web Components. I guessed it is supported via web-types.json file

[break-stuff]

The web-types.json is also generated from the CEM.

[break-stuff]

Unless it is purely HTML and CSS content in a custom element, I would imagine it would also have a custom element definition somewhere where it could be included in the CEM. If not, developers could stub out a class with the appropriate JSDoc tags to get the information included.

[sashafirsov]

There are few DCE proposals. My does not have any JS, hence JSDocs. It is pure declarative with HTML and embedded CSS.

<custom-element tag="my-element" >
<xsl:param name="attr1" description="sample of attribute with inline default value">default value for attr1</xsl:param>
  attribute value:  {$attr1}
</custom-element>
<my-element></my-element> <!-- default for attr1 -->
<my-element attr1="😊"></my-element> <!-- smile -->

Question is now to hook into HTML changes on custom-element and render my-element definitions into CEM-tools so either manifest or web-types populated?

[break-stuff]

Until there is another way to serialize them, we may have to create the JSDoc in the project so the metadata for the component can be included in the CEM.

Something like:

/**
 * @attr {string} attr1 - sample of attribute with inline default value
 *
 * @csspart bar - Styles the color of bar
 *
 * @slot - This is a default/unnamed slot
 * @slot container - You can put some elements here
 *
 * @cssprop --text-color - Controls the color of foo
 * @cssproperty [--background-color=red] - Controls the color of bar
 *
 * @summary This is MyElement
 *
 * @tag my-element
 */
class MyElement extends HTMLElement {}

[sashafirsov]

It looks like .d.ts wondering if my-page.html.dce.d.ts would be a good way of holding this JSDoc?

[break-stuff]

I don't think any of the CEM analyzers can pull from type definitions.