Handling data-from-query results in your own element

data-from-query runs a SPARQL query (or a triple pattern) and hands the results to the element it sits on. On a <ul> or <select> it fills the rows in for you; on an <img> it sets the src to the result URI; on a plain text element (an <h1>, <span>, …) it sets the element's text to the result; on your own custom element it just hands you the data so you can render it however you like.

1. Put the attribute on your element

<x-foo data-from-query data-endpoint="https://dbpedia.org/sparql" data-sparql="SELECT ?name WHERE { … } LIMIT 5" ></x-foo>

2. Receive the results

When the query finishes you get the W3C SPARQL JSON. Pick whichever you prefer:

Listen for the sol-data-ready event. It bubbles, so you can listen on the element itself or on any ancestor:

el.addEventListener('sol-data-ready', (e) => {
  const rows = e.detail.data.results.bindings;   // one object per result row
  // rows[0].name.value  →  the ?name value of the first row
});

Or define a swcData setter on your element — the results are assigned to that property when they arrive:

class XFoo extends HTMLElement {
  set swcData(results) {
    const rows = results.results.bindings;
    // render from rows…
  }
}
customElements.define('x-foo', XFoo);

The data shape

Both give you the W3C SPARQL 1.1 Query Results JSON:

{
  head:    { vars: ["name"] },
  results: { bindings: [ { name: { type: "literal", value: "Adi Shamir" } }, … ] }
}