api-viewer-element icon indicating copy to clipboard operation
api-viewer-element copied to clipboard

Exclude attributes managed by the component itself from the demo snippet

Open yinonov opened this issue 2 years ago • 3 comments

web component may render differently than its origin html snippet (eager attributes). in such cases authors might want source to freeze this programmatic mutation of dom tree is probably an anti-pattern but still can be an interim and causes confusion in docs.

yinonov avatar Nov 03 '21 09:11 yinonov

Hi, thanks for the issue. Could you please elaborate a bit with some concrete example of what you would expect?

web component may render differently than its origin html snippet

If you mean some "state" attributes (e.g. in Vaadin components we use has-value, has-label etc based on presence of a certain property), then it's out of scope for now. If CEM analyzer supports states, we can add those of course.

web-padawan avatar Nov 03 '21 11:11 web-padawan

take spectrum's button for example. in order to render the following button image we should simply author <sp-button>OK</sp-button>

the rendered dom tree, however, would output <sp-button dir="ltr" variant="cta" focusable="" tabindex="0" role="button" size="m">OK</sp-button>

but we wouldn't want authors to get the wrong information and have all that unnecessary code presented in the source tab

yinonov avatar Nov 03 '21 20:11 yinonov

Thanks, so my assumption above was correct. I will try some Vaadin components and see how to handle these "state" attributes that the component owns and distinguish them from "props" that the consumer typically provides.

web-padawan avatar Nov 03 '21 20:11 web-padawan