Summary References web-appcustom-elementelement-attrelement-stateelement-flowglobal-stateimport-elementimport-scriptimport-styleis-visibleis-hiddenrepeat-list Elements trigger-eventlisten-event Flows set-attrset-stateset-timersend-eventhttp-requestrequest-headerrequest-bodyresponse-okresponse-failscripttrigger-element Actions Comparison OperatorsMutation OperatorsData Source Misc
Summary References web-appcustom-elementelement-attrelement-stateelement-flowglobal-stateimport-elementimport-scriptimport-styleis-visibleis-hiddenrepeat-list Elements trigger-eventlisten-event Flows set-attrset-stateset-timersend-eventhttp-requestrequest-headerrequest-bodyresponse-okresponse-failscripttrigger-element Actions Comparison OperatorsMutation OperatorsData Source Misc
References Table of Contents

This action tag is used to set an attribute of Custom Element. It’s rare case that we need to set an attribute. But in Realm it’s possible to do that.

Defined custom element attribute's name name It can be static or dynamic, if this element tag has `from` attribute, then the value will be dynamic and the value itself should be a selector prefixed with `$.` notation. value The data source selector, see the complete list on Data Source page. from If it's present, then the state will be toggled between `true` and `false` based on the value of the state. toggle Attributes

Example If you inspect the <my-element> from the devtools, you will see the owner attribute will changed once you click the button.

<custom-element name="my-element">
  <element-attr name="owner" type="string">No Owner</element-attr>
  <element-flow>
    <trigger-event click="Button">
      <set-attr name="owner" value="New Owner"></set-attr>
    </trigger-event>
  </element-flow>
  <template>
    <slot name="@owner"></slot>
    <button ref="Button">Click me!</button>
  </template>
</custom-element>

<my-element></my-element>
<br />
<my-element owner="R. Pracutian"></my-element>
No Owner
R. Pracutian Action: set-attr