Use URIs or other properties of things within attributes

[angelo-v]

As a dashboard builder I want to be able to link to the things refered by pos-resource or pos-list (see e.g. #119 (comment))

In general, I want to be able to pass values into attributes of child elements and not only use them as child elements

<pos-resouce uri="...">
   <pos-label></pos-label> // This works
   <img alt="how to refer to pos-label here?" src="..."> // Something like this should be possible as well
</pos-resource>

[jg10-mastodon-social]

This might be a generalisation/possible alternative to #101 Setting a value from linked data onto an arbitrary HTML component

The current idiomatic solution in PodOS is to use a custom web component that receives the resource and uses Thing methods, so the given example would be

<pos-resource uri="...">
   <pos-label></pos-label>
   <pos-picture></pos-picture>
</pos-resource>

And pos-picture is responsible for populating its own alt attribute.

Similarly, I have experimented with a component that creates an a and sets it's href

<pos-resource uri="...">
   <my-link><pos-label></pos-label></my-link>
</pos-resource>

There's therefore at least three possible interface solutions here:

1. a separate component that can set arbitrary attributes on a child element (as referred to in Setting a value from linked data onto an arbitrary HTML component #101)
2. a templating approach, as used in many frameworks, and arguably alluded to in the original issue above.
3. continuing with custom components for each use case, arguably PodOS' current idiom.

---

Edit:
There's not a huge difference between

<my-link property="bmark:recalls">
  <pos-label></pos-label>
</my-link>

and

<set-value property="bmark:recalls" attr="href">
  <a><pos-label></pos-label></a>
</set-value>

The latter is a generic version of the former and would produce the same hydrated innerHTML

<a href="https://uri/of/bookmark">
  <pos-label></pos-label>
</a>

So maybe the big decision is whether to adopt a templating language or stick with web components.

[jg10-mastodon-social]

A new example of a templating approach: https://codeberg.org/Taganak/trinja

ex:Turtle trinja:genericTemplate """
  <img
    src="{{ this["<https://sdk.taganak.net/vocab/examples/image>"] }}"
    alt="{{ this["<https://sdk.taganak.net/vocab/examples/name>"] }}"
  />
"""^^trinja:minijinja .

[jg10-mastodon-social]

#136 covers the case of setting a URI on a link in pos-rich-link