如何在hyperHTML中动态更改标记

Question

此代码不起作用。

const render = ({title, tag, values}) => {
    bind(document.body)`
        <h1>${title}</h1>
        <div>
            <${tag} data=${values}></${tag}>
        </div>
    `
}

render({title: "test", tag: "custom-elem1", values: {foo: "bar"}})

我可以使用hyperHTML动态地更改标记吗？

Answer 1

你可能不喜欢答案，但它是，不，，你不能。

原因是，与其他类似库一样，hyperHTML不能处理字符串，它可以使用DOM，而且在DOM世界中，即使尝试更改标记名称也不能更改。

var div = document.createElement('div');
div.tagName = 'P';
console.log(div.tagName); // "DIV"

相反，您可以做的是返回您喜欢的元素。

const render = ({title, tag, values}) => {
  const ref = document.body;
  bind(ref)`
    <h1>${title}</h1>
    <div>${(() => {
      switch tag:
        case 'custom-elem1':
          return wire(ref)`<custom-elem1 data=${values} />`;
        case 'custom-elem2':
          return wire(ref)`<custom-elem2 data=${values} />`;
        case 'custom-elem3':
          return wire(ref)`<custom-elem3 data=${values} />`;
      })()
    }</div>`;
};

在这种情况下，您可以随心所欲地做任何事情，只要您不尝试动态更改DOM标记特性，因为即使是hyperHTML也无法做到这一点。