Usage of the src Attribute#

Components that usually need to request data through an interface support the src attribute. However, the usage supported by each component may differ, with some components supporting all usages and others only supporting some. It can be used in the following three ways:

#API

A URL that can return data upon request.

<spz-render layout="container" src="/api/products/productID">
  <!-- ... -->
</spz-render>

#Local Data

Local data can be fetched using a JSON type script.

<script id="render-json" type="application/json">
  {
    <!-- ... -->
  }
</script>

<spz-render layout="container" src="script:render-json">
  <!-- ... -->
</spz-render>

#spz-script

Data can be fetched using a function exported through spz-script. In this element, data can be returned from an API request or can be local data.

<spz-script id="custom-script">
  function getData() {
    /* ... */
    return Promise.resolve({/* ... */})
  }

  exportFunction('getData', getData);
</spz-script>

<spz-render layout="container" src="spz-script:custom-script.getData">
  <!-- ... -->
</spz-render>

#AI Usage Notes (LLM Ready)

• Section density: detected 0 level-2 headings.
• Example density: detected 3 code blocks.
• Read conclusions first: extract definitions, constraints, and boundary conditions.
• Then verify with examples: rely on executable snippets rather than prose only.
• Finally cross-check: open related component pages to avoid doc/runtime drift.