如何在 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 world 你无法更改标签名称，即使你尝试了。

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

您可以改为 return 您喜欢的元素。

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 可以做到

如何在 hyperHTML 中动态更改标签

How to change tag dynamically in hyperHTML

javascript

hyperhtml