Logo Rangkaian Kartun dengan Komponen Web

Sejak saya kecil, saya suka Logo Rangkaian Kartun klasik.

Saya mencipta Elemen HTML Tersuai untuk membuat teks seperti itu dengan warna yang berbeza.

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  ;
                        }
                    });
                }
            }

        }

Sila tanya saya apa-apa soalan.

Untuk mengetahui lebih lanjut tentang elemen tersuai, lawati MDN.

Atas ialah kandungan terperinci Logo Rangkaian Kartun dengan Komponen Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!