是否可以将纤细组件的（最终结果）HTML 代码呈现为字符串（转义/显示原始 HTML 代码）？

Posted 2023-05-07

【中文标题】是否可以将纤细组件的（最终结果）HTML 代码呈现为字符串（转义/显示原始 HTML 代码）？

【英文标题】：Is it possible to render svelte component's (end result) HTML code as a string (escape/show raw HTML code)?

【发布时间】：2021-07-24 07:18:01

【问题描述】：

我有一个简单的 PrimaryButton.svelte 组件，它只包含“html”（没有脚本或样式标签），看起来像这样：

<button class="btn-primary btn accent--br">Primary button</button>

然后我将组件导入到 App.svelte 中，它在浏览器中呈现得很好，但我也想显示组件的 HTML 代码。

App.svelte 看起来像这样：

<script>
    import PrimaryButton from "./components/Buttons/PrimaryButton.svelte";
</script>

<PrimaryButton/>

我尝试将它呈现为这样的字符串：PrimaryButton 而不是 <PrimaryButton/>. 但是浏览器显示了这个字符串：

class PrimaryButton extends SvelteComponentDev  constructor(options)  super(options); init(this, options, instance$5, create_fragment$5, safe_not_equal, ); dispatch_dev("SvelteRegisterComponent",  component: this, tagName: "PrimaryButton", options, id: create_fragment$5.name );  

我有点希望它将组件的 HTML 显示为字符串，但我确实理解为什么没有发生这种情况。

如何在浏览器中将组件的输出 HTML 显示为字符串？你会怎么做？

【参考方案1】：

你可以使用DOM元素的outerHTML属性。

// PrimaryButton.svelte
<script>
let element;
export let code = "";
onMount(() => 
  code = element.outerHTML
)
</script>

<button bind:this=element class="btn-primary btn accent--br" href="#">Primary button</button>


// App.svelte
<script>
import PrimaryButton from "PrimaryButton.svelte"

let PrimaryButtonCode;
</script>

<pre>PrimaryButtonCode</pre>
<PrimaryButton bind:code=PrimaryButtonCode />

【讨论】：

我不想通过控制台记录它，我想在网页上与渲染按钮一起显示它。我从你的回答中不明白什么吗？

好吧，我想通了……但还不是我想要的。感谢您的回答

我必须指出，如果不首先实例化组件，就无法获取该 HTML 字符串。想必你已经意识到，组件是纯 JS，HTML“模板”是用 JS 编码的，在执行 JS 代码之前它是不存在的。

我最终做了一些完全不同的事情，因为它更适合我的用例（请参阅我的答案）。但是，我非常感谢您的回答，并且我认为这也是一种合法的方式。刚开始学习 svelte，所以还不太了解。

【参考方案2】：

我最终定义了 .html 文件，然后使用这个插件将它们导入到纤细的组件中： https://www.npmjs.com/package/rollup-plugin-string

在纤细的组件中，我可以渲染 HTML 或显示 HTML 代码的字符串：

<script>
    import button from "./button.html";
</script>

button

@html button