IT일상

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/29/ 🏆 로또를 구매하세요~ 구매하기 로또를 구매하는 폼을 만들고자 합니다. 엘리먼트는 1) 1~45의 숫자 6개를 받아야 하며 2) 서로 중복되지 않는 번호인지 검증해야 합니다. customElements.define('my-lotto-input', class MyLottoInput extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` `; } }); 커스텀 폼 컨트롤은 위와 같이 만들 수 있습니다. 하지만 이렇게 만들더라도 form은 이 input이 올바른지, 어떠한 값을 가..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/28/ 안녕하세요. 오늘도 좋은 날씨네요! my-modal이라는 Custom Element를 만들었습니다. 모달의 모양만 가지고 있는 엘리먼트인데, 그럼 모달안의 내용은 어떻게 전달할까요? Light DOM 안녕하세요. 오늘도 좋은 날씨네요! 오늘 날씨는 15도입니다. 기온이 많이 올라갔지만 따뜻하게 입는 것 잊지 마세요! customElements.define('my-modal', class MyModal extends HTMLElement { constructor() { super(); this.childrenHTML = this.innerHTML; this.innerHTML = ` ${this.childrenHTML} 확인..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/25/ 본 글에서는 Custom Element를 적용해보는 위주로 다룹니다. 상세한 내용을 확인하려면 아래의 링크를 참고해주세요. WHATWG Spec: https://html.spec.whatwg.org/multipage/custom-elements.html MDN - Using custom elemtns: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements More capable form controls: https://web.dev/more-capable-form-controls/ Custom Elements best practi..