그리고 그 결과로, 아래 코드의 HTML 블록 {name} 템플릿 문법에 의해서 화면에 “Hello World!”라고 보일 것으로 예상됩니다.

예제 코드 /my-svelte-project/src/App.svelte 파일의 HTML 블록

<script>
    export let name;
</script> 
<main>
    <h1>Hello {name}!</h1>
… 생략 … 
</main>
… 생략 …

이때 스타일 블록의 텍스트 스타일 정의에 의해서

스타일 블록

h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
   }

text-transform: uppercase 속성이 잘 적용되어 대문자 “HELLO WORLD!”로 보여집니다.

지금까지 우리가 작성한 스벨트 컴포넌트 app를 document에 포함시키는 방법을 알아보았습니다. 다음 장에서는 document 안에 표현되는 템플릿 기본 표현식을 공부해보겠습니다.