The fx-output Element
Using ref and value
Outputting a referenced value
Using the value attribute to evaluate an expression in context
Using the value attribute to evaluate an expression in context of its ref
Using the context() function to use the parent context
Using value with predicate
Using slot="label" for an accessible name
The slotted label is rendered as visible text and also wired to the shadow-DOM
widget's aria-label, since a shadow-DOM boundary sits between the two
and an id/for reference can't cross it.
Output different mediatypes
HTML taken from an instance (mediatype='html')
For demo purposes the fx-output element with mediatype have a blue border.
Images
With mediatype "image" the bound value is expected to be a link to be dereferenced an
Same but different
Same result can be achieved with a simple template expression. However for accessibility reasons (label)
and potentially attaching listeners the fx-output variant is still valid.
Markdown
This works with the help of drawdown.js which needs to be imported in the page.
It uses a custom function to do the actual conversion and debounce to update every 300Millis