Javascript

Custom HTMLElement # 이번 포스팅에선 Custom HTMLElement의 스타일을 변경하는 방법과 만든 Custom HTMLElement를 사용한 예제를 간략하게 포스팅 하겠습니다. CSS 적용하기 # const styleText = ` div { border : 1px solid; margin: 15px; width : 200px; height: 240px; }`; class CustomTag extends HTMLElement { constructor() { ... 중략 ... // 스타일 적용방법 1 const styleSheet = new CSSStyleSheet(); styleSheet.replaceSync(styleText); shadowRoot.adoptedStyleSheets= [styleSheet]; // 스타일 적용방법 2 shadowRoot.innerHTML = ` <style> div > p { font-weight : bold; } </style>` 위와 같은 방법으로 Custom Element에 CSS를 적용할 수 있습니다.