Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

通常、文字列はプレーンテキストとして挿入され、<>のような文字は特別な意味を持ちません。

しかし、HTMLをコンポーネントに直接レンダリングする必要がある場合もあります。例えば、あなたが今読んでいる文章はマークダウンファイルに存在し、HTMLのblobとしてこのページに含まれています。

Svelteでは、{@html ...} という特別なタグを使ってこれを行います。

App
<p>{@html string}</p>

重要: Svelte は DOM に挿入される前に {@html ...} 内の式のサニタイズを行いません。あなたがご自身で書いた記事など、信頼できるコンテンツの場合は問題ありませんが、信頼できないユーザーコンテンツ (例えば記事に対するコメントなど) の場合は、手動でエスケープする必要があります。そうしないとユーザーを Cross-Site Scripting (XSS) 攻撃にさらす危険性があります。

Edit this page on GitHub

previous next
1
2
3
4
5
6
<script>
	let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
 
<p>{string}</p>