是否可以将 svelte 组件的（最终结果）HTML 代码呈现为字符串（escape/show 原始 HTML 代码）？

Question

我有一个简单的 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, create_fragment, safe_not_equal, {}); dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "PrimaryButton", options, id: create_fragment.name }); } }

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

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

Answer 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} />

Answer 2

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

在 svelte 组件中，我可以呈现 HTML 或显示 HTML 代码的字符串：

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

{button}

{@html button}

是否可以将 svelte 组件的（最终结果）HTML 代码呈现为字符串（escape/show 原始 HTML 代码）？

Is it possible to render svelte component's (end result) HTML code as a string (escape/show raw HTML code)?

html-escape-characters

svelte