Informative properties on Web Components

[devpaul]

I would like to provide a set of read-only informative properties on a Dojo web component that can be used to interrogate the state of the widget. For example, properties on HTMLMediaElement like duration, ended, and error provide information without allowing the consumer of the element a way to directly change these values.

This problem may be two-fold.

• How do I update a property from inside a Dojo widget when using web components?
• How do I make a web component property read-only?

How can we solve this problem so a Dojo web component can provide informative read-only properties?

[matt-gadd]

I think this issue maps pretty similarly to https://github.com/dojo/framework/issues/253#issuecomment-464016705. Widgets have no concept of getters as it's the opposite direction in data flow (it's why you never see a readonly property or any get interface in widgets).

You again could write a controlling widget that potentially does this and exposes properties off an api but not directly off the element (like controls in the other comment). But again this would be extra custom element specific code.

I think at this point, you can see that we're not a custom elements first framework, and I think thats an absolutely fair statement. The custom element target is meant to be a zero config/code/thought export for dojo users. Perhaps in the future we can explore a more custom element centric wrapper, but at that point which I think the dojo team have previously discussed, we'd actually consider becoming a more custom element centric framework like stencil, because having 2 authoring mechanisms that diverge code wise doesn't really work.

[devpaul]

Yeah, I think the best approach right now is to extend the output of create().

I think the challenge I'm running into is when a widget is part of an application its state is externalized and dojo/store provides processes for modifying the data. These processes and state aren't available to an individual widget/custom element.

While widgets don't technically have read-only states, when it is part of an application it is extremely common for one widget to use a store to inform another widget. Thus the first widget creates the state (this would be akin to a read-only property) and the second widget only consumes it.

I don't really have a solution for this other than extend the output of create() and rewrite the same business logic as my dojo/store process layer already performs but on a widget-level; i.e. a function to change the value and a readonly defined property on the custom element.

It would be nice to have a way to slice off processes and state relevant to only that widget. If we don't have a pattern or solution at this time then we can close this issue.