[html] 웹 컴포넌트 테스트

22 Dec 2023

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 컴포넌트 테스트</title>
</head>
<body>
    <h1>웹 컴포넌트 테스트</h1>

    <my-component></my-component>

    <script>
        customElements.define('my-component', class MyComponent extends HTMLElement {
            constructor() {
                super();
                const shadow = this.attachShadow({mode: 'open'});
                
                const div = document.createElement('div');
                div.textContent = '이것은 웹 컴포넌트입니다.';
                
                shadow.appendChild(div);
            }
        });
    </script>
</body>
</html>

이 코드는 “웹 컴포넌트 테스트”라는 제목과 웹 컴포넌트를 포함한 간단한 HTML 문서를 보여줍니다. 웹 컴포넌트는 “이것은 웹 컴포넌트입니다.”라는 텍스트를 표시합니다.