웹 구성 요소가 포함된 카툰 네트워크 로고

어렸을 때부터 클래식한 카툰 네트워크 로고를 좋아했습니다.

다른 색상으로 텍스트를 만들기 위해 맞춤 HTML 요소를 만들었습니다.

class CartoonNetworkify extends HTMLElement {

    // respond to color updates
    static observedAttributes = ['color1','color2'];

    constructor() {
        super();
    }

    connectedCallback() {
            let words = this.innerText.split(' ');
        this.attachShadow({mode:'open'});
        var root = this.shadowRoot;
        var table = document.createElement('table');

        // longest word length
        let maxLength = words.reduce((max,w, i)=>  w.length > max ? w.length: max, Number.MIN_VALUE);

        // default black & white
        var color1 = this.getAttribute('color1') || 'black';
        var color2 = this.getAttribute('color2') || 'white';

        words.reduce((tbody,line,i,words)=>{
            // pad for extra space
            line = line.padEnd(maxLength);
            let trow = line.split('').reduce((trow,letter,j)=>{
                // create cells
                let td = trow.insertCell();
                td.innerText = letter.toUpperCase();
                let odd  = i%2 == j%2;
                td.dataset.odd = odd;

                                td.style.backgroundColor=odd?color1:color2;
                    td.style.color = odd?color2:color1;
                return trow;
                    }, tbody.insertRow());
                    return tbody;
                }, table.createTBody());
                root.append(table);

                // add style from template
                let template = document.getElementById('cartoon-networkify-template');
                root.append(template.content.cloneNode(true));
            }

            // update attributes later
            attributeChangedCallback(name,oldValue, newValue) {             
                if(this.shadowRoot) {
                    this.shadowRoot.querySelectorAll('td').forEach((td)=> {
                        var odd = td.dataset.odd == 'true';
                        if(name=='color1') {
                            td.style[odd?'backgroundColor':'color'] = newValue  ;
                        } else if(name == 'color2') {
                            td.style[odd?'color':'backgroundColor'] = newValue  ;
                        }
                    });
                }
            }

        }

궁금한 점은 언제든지 문의해주세요.

맞춤 요소에 대해 자세히 알아보려면 MDN을 방문하세요.

위 내용은 웹 구성 요소가 포함된 카툰 네트워크 로고의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!