Props

Read-only Props are read-only within a component, and only be set by the parent component. If the values change, the component re-renders with the new values. They are only supposed to be information being passed to the component, which means they can't be changed internally. For internal, mutable data, use State instead.

Props allow components to receive data. You can think of Props as being like "function parameters": They allow you to pass down "arguments" (attributes) to component which can then modify it's appearance, behavior, or content based on the values of these parameters.

Props are set by the parent component (or HTML page). For String values, use plain attributes (e.g. <x-Btn design="round">). For any non-String types, you can use data props set using a := directive syntax for (e.g. <x-Chart data:='[1, 2, 3]'>).

renderObj

Props contributes it's received values to the renderObj. Examples:

Prop set like: <x-Btn design="round"> will be accessible on the renderObj like renderObj.props.design, and in the Script or Template CParts like props.design.
Prop set like: <x-Chart data:='["a", "b"]'> will be accessible on the renderObj like renderObj.props.data (with individual items accessed with code that ends with ".data[0]"), and in the Script or Template CParts like props.data.

Examples

Example #1: Defining Props

Props must always be defined first:

<Props
    thing1
    thing2
></Props>

<Template>
    <p>
        <strong>{{ props.thing1 }}</strong>:
        <em>{{ props.thing2 }}</em>
    </p>
</Template>

Example #2: Setting Props

Props are set using attributes:

<p>Example 1:</p>
<x-SimplePropsComponent
    thing1="Foobar"
    thing2="Lorem Ipsum"
></x-SimplePropsComponent>
<p>Example 2:</p>
<x-SimplePropsComponent
    thing1="quux++"
    thing2="Dolor Sit Amet"
></x-SimplePropsComponent>

Example 1:

Example 2:

Example #3: Flash card with HTML props

Here we use "top", "content", and "info" as three props. Note how props.content uses |safe filter to allow HTML.

<Props
    top
    content
    info
></Props>

<Template>
    {% if props.top %}
        <h1>{{ props.top }}</h1>
    {% endif %}
    {{ props.content|safe }}
    {% if state.show %}
        <p>
            <strong>ANSWER:</strong><br />
            {{ props.info }}
        </p>
    {% else %}
        <label>
            ✨ REVEAL ANSWER ✨
            <input [state.bind] name="show" type="checkbox">
        </label>
    {% endif %}
</Template>

<State
    show:=false
></State>

<Style>
    :host {
        display: block;
        height: 200px;
    }
    :host > * {
        box-shadow: 10px 10px 10px #00000033;
        background: salmon;
        padding: 5px;
        margin: 0;
        font-size: 0.9rem;
        border: 2px outset salmon;
    }
    :host p {
        background: white;
    }
    label {
        height: 50px;
    }
    input[name=show] {
        display: none;
    }
</Style>