developit / htm

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Apache License 2.0
8.73k stars 170 forks source link

Suggestion: Document the syntax for custom elements #61

Open bahrus opened 5 years ago

bahrus commented 5 years ago

Does htm follow the same syntax / inference rules as preact as far as attributes / properties? Or did it adopt the lit-html syntax? Either way, it would be helpful to document.

developit commented 5 years ago

It's identical to JSX, since the output is just calls to the createElement() / h() function for whatever framework you're using. In the case of Preact, those rules are roughly:

setPropForNode(node, name, value, isSvg) {
  if (name === 'class' || name === 'className') {
    node.className = value;
  }
  else if (name === 'style') {
    Object.assign(node.style, value);  // not really but similar
  }
  else if (name.startsWith('on')) {
    const evt = name.substring(2).toLowerCase();
    addEventListener(evt, value) / removeEventListener(evt, value)
  }
  else if (name in node && !isSvg) {
    node[name] = value;
  }
  else {
    node.setAttribute(name, value);
  }
}

You can see the full source for the rules here.