Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: Document the syntax for custom elements #61

Open
bahrus opened this issue Jan 27, 2019 · 1 comment
Open

Suggestion: Document the syntax for custom elements #61

bahrus opened this issue Jan 27, 2019 · 1 comment

Comments

@bahrus
Copy link

@bahrus bahrus commented Jan 27, 2019

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
Copy link
Owner

@developit developit commented Feb 3, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.