웹컴포넌트를 파라미터를 통해 콘텐츠 제어하기

웹컴포넌트를 파라미터를 통해 콘텐츠 제어하는 예시를 기록해둔다.

이렇게 하면 간단하게 파라미터 값으로 컴포넌트를 효과적으로 사용할 수 있다.

 

class FooterComponent extends HTMLElement {
    static get observedAttributes() {
        return ['company-logo', 'copyright', 'reg-number1', 'reg-number2', 'ceo', 'width', 'visible'];
    }

    constructor() {
        super();
        this.companyLogo = '';
        this.copyright = '';
        this.regNumber1 = '';
        this.regNumber2 = '';
        this.ceo = '';
        this.width = '100%';
        this.visible = true;
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue === newValue) return;

        switch(name) {
            case 'company-logo':
                this.companyLogo = newValue;
                break;
            case 'copyright':
                this.copyright = newValue;
                break;
            case 'reg-number1':
                this.regNumber1 = newValue;
                break;
            case 'reg-number2':
                this.regNumber2 = newValue;
                break;
            case 'ceo':
                this.ceo = newValue;
                break;
            case 'width':
                this.width = newValue;
                break;
            case 'visible':
                this.visible = newValue === 'true';
                break;
        }
        this.updateContent();
        this.updateStyles();
    }

    updateContent() {
        const footerContainer1 = this.querySelector('.footer-container1');
        if (footerContainer1) {
            footerContainer1.innerHTML = `
                <div>${this.companyLogo}</div>
                <div>
                    <div>${this.copyright}</div>
                    <div>${this.regNumber1}</div>
                    <div>
                        <span>${this.regNumber2}</span>
                        <span>${this.ceo}</span>
                    </div>
                </div>
            `;
        }
    }

    updateStyles() {
        const footer = this.querySelector('footer');
        if (footer) {
            footer.style.width = this.width;
            footer.style.display = this.visible ? 'flex' : 'none';
        }
    }

    connectedCallback() {
        this.innerHTML = `
            <footer>
                <div class="footer-container1">
                    <!-- 이 부분은 updateContent에서 동적으로 채워집니다 -->
                </div>
                <!-- 나머지 footer 내용 -->
            </footer>
            <style>
                footer {
                    display: flex;
                    justify-content: space-between;
                    width: var(--footer-width, 100%);
                }
                .footer-container1 {
                    display: flex;
                    flex-direction: column;
                }
                /* 나머지 스타일 내용 */
            </style>
        `;
        this.updateContent();
        this.updateStyles();
    }
}

customElements.define('footer-component', FooterComponent);

 

컴포넌트에 값 넣는 예시

<footer-component 
    company-logo="My Company" 
    copyright="© 2025 My Company" 
    reg-number1="123-45-67890" 
    reg-number2="987-65-43210" 
    ceo="John Doe"
    width="80%"
    visible="true">
</footer-component>

 

js로도 제어 가능

const footer = document.querySelector('footer-component');
footer.setAttribute('width', '50%');
footer.setAttribute('visible', 'false');