마카로닉스

1765 No

Vue.js 이용전 자바스크립트 shadow Dom 활용법

2021-10-10 12:00:13 By 라이트 0 438 댓글수 5 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>

	<label>11111</label>
	<br>
	<custom-input></custom-input>

	<template id="testClassTemplate">
		<label> 이메일을 입력하쇼</label><input type="email">
		<style>
			label {
				color: red
			}
		</style>
	</template>

	<br>
	<label>2222222</label>

	<script>
		class testClass extends HTMLElement {
			connectedCallback() {
				this.attachShadow({ mode: 'open' });
				this.shadowRoot.append(testClassTemplate.content.cloneNode(true));			
				//this.innerHTML=`<label> 이메일을 입력하쇼</label><input type="email"><style> label {color:red}</style>`;
			}
		}
		customElements.define("custom-input", testClass);		
	</script>

</body>

</html>