Ideas I'm playing with on using Web Components to declaratively define custom elements and behavior entirely in mark-up On its own, neat and not that original. But i think Web Components make this idea particularly powerful and accessible. More so, I'm interested in combining this with a web component authoring tool, which might allow component-…

gistfile1.txt

<todo-item id=todo-939528>
  <input type=checkbox on-click=toggle>
  <span class=todo-label>
    <do-bind target=.todo-edit></do-bind>
  </span>
  <input class=hidden class=todo-edit value="Show how a declarative style might work" />

  <do-action name=toggle>
    <do-set-attribute target="[type=checkbox]" attribute=checked>checked</do-set-attribute>
  </do-action>
  <do-action name=edit>
    <do-toggle target=.todo-label></do-toggle>
    <do-toggle target=.todo-edit></do-toggle>
  </do-action>
</todo-item>


Tags required for this example:

do-bind: Updates its contents to that of a target and watches for changes
do-action: Defines a named action on the parent that can be triggered within the widget
do-set-attribute: Changes an attribute on a target
do-toggle: Toggles visiblity of a target


<do-widget name=todo-item require="id">
  <template>
    <input type=checkbox on-click=toggle>
    <span class=todo-label>
      <do-bind target=.todo-edit></do-bind>
    </span>
    <input class=hidden class=todo-edit value="" autofocus />
  </template>

  <do-action name=toggle>
    <do-set-attribute target="[type=checkbox]" attribute=checked>checked</do-set-attribute>
  </do-action>
  <do-action name=edit>
    <do-toggle target=.todo-label></do-toggle>
    <do-toggle target=.todo-edit></do-toggle>
  </do-action>
</do-widget>


Defines a custom element "todo-item" which on creation will copy the template contents,
and attach the event listeners to the defined actions.