<!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>
댓글 ( 5)
댓글 남기기