在 stenciljs 中将值绑定为 html

Posted 2023-02-24

【中文标题】在 stenciljs 中将值绑定为 html

【英文标题】：Binding value as html in stenciljs

【发布时间】：2018-10-03 16:02:23

【问题描述】：

我无法将带有自定义 html 的值呈现到元素中。 例如：

this.title = 'Hello <b> stencil </b>'; << response value from an API 

绑定：

<h1>this.title</h1>

我期待与 javascript 中的 innerHtml 行为相同的东西。

【参考方案1】：

你可以使用

<h1 innerHTML=this.title />

【讨论】：

我之前试过但是不行，不知道现在怎么样了，可能是新版本更新修复了。谢谢

实际上它是在新版本中添加的：D

【参考方案2】：

这在 JSX 中不是一个好的做法，它违背了虚拟 DOM 的理念，并且没有创建虚拟节点。

你应该这样尝试

this.salute = 'Hello';
this.name='stencil';

绑定

<h1>this.salute <b>this.name</b></h1>

或者如果情况更复杂，构建另一个更小的组件。

但是使用innerHTML 会起作用，但应该在不同的情况下使用更多细节here(at the bottom of the page)。

【讨论】：

标题值来自服务器响应

这不应该被 imo 否决。虽然它没有回答所提出的问题，但它确实强调了问题是an XY problem，而解决方案实际上是“如果可以避免的话，不要将 HTML 放入您的内容中”。在从服务器拉取的内容中允许 HTML 是一个滑坡：当 HTML 无效时会发生什么？当然，有些情况是无法避免的，但那些应该是例外——而不是规则。这个答案很好地解释了这一点。

是的，这个答案应该被赞成。这个问题可能是一个安全问题，看这里：cwe.mitre.org/data/definitions/116.html