HTML5高级应用实战：构建现代化Web组件库

一、现代Web组件技术概览

HTML5提供的组件化解决方案：

Custom Elements：定义自定义HTML元素
Shadow DOM：封装组件内部结构
HTML Templates：声明式模板定义
Slots：内容分发机制
属性反射：属性与属性同步

二、基础组件开发

1. 自定义按钮组件

class CustomButton extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                button {
                    padding: 10px 20px;
                    border: none;
                    border-radius: 4px;
                    background-color: var(--primary-color, #6200ee);
                    color: white;
                    cursor: pointer;
                    transition: all 0.3s;
                }
                button:hover {
                    opacity: 0.9;
                    transform: translateY(-2px);
                }
            </style>
            <button><slot>按钮</slot></button>
        `;
    }
}
customElements.define('custom-button', CustomButton);

2. 使用示例

<custom-button>提交表单</custom-button>
<custom-button style="--primary-color: #03dac6">特殊按钮</custom-button>

三、高级组件开发

1. 可折叠面板组件

class AccordionPanel extends HTMLElement {
    static get observedAttributes() {
        return ['expanded'];
    }

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    border: 1px solid #ddd;
                    border-radius: 4px;
                    margin-bottom: 8px;
                }
                .header {
                    padding: 12px 16px;
                    background-color: #f5f5f5;
                    cursor: pointer;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .content {
                    padding: 0 16px;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                }
                .icon::after {
                    content: '+';
                    font-size: 1.2em;
                }
                :host([expanded]) .icon::after {
                    content: '-';
                }
                :host([expanded]) .content {
                    max-height: 1000px;
                    padding: 16px;
                }
            </style>
            <div class="header">
                <slot name="title">面板标题</slot>
                <span class="icon"></span>
            </div>
            <div class="content">
                <slot></slot>
            </div>
        `;
        
        this.shadowRoot.querySelector('.header')
            .addEventListener('click', () => {
                this.toggle();
            });
    }

    toggle() {
        this.expanded = !this.expanded;
    }

    get expanded() {
        return this.hasAttribute('expanded');
    }

    set expanded(value) {
        value ? this.setAttribute('expanded', '') 
              : this.removeAttribute('expanded');
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'expanded') {
            this.dispatchEvent(new CustomEvent('toggle', {
                detail: { expanded: this.expanded }
            }));
        }
    }
}
customElements.define('accordion-panel', AccordionPanel);

四、组件组合应用

1. 标签页组件系统

class TabSystem extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .tab-header {
                    display: flex;
                    border-bottom: 1px solid #ddd;
                }
                .tab-btn {
                    padding: 10px 20px;
                    background: none;
                    border: none;
                    cursor: pointer;
                    position: relative;
                }
                .tab-btn.active::after {
                    content: '';
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    right: 0;
                    height: 2px;
                    background-color: #6200ee;
                }
                .tab-content {
                    padding: 16px;
                }
            </style>
            <div class="tab-header"></div>
            <div class="tab-content"></div>
        `;
        
        this._headers = this.shadowRoot.querySelector('.tab-header');
        this._content = this.shadowRoot.querySelector('.tab-content');
        this._tabs = [];
    }

    connectedCallback() {
        this._setupTabs();
    }

    _setupTabs() {
        const tabs = Array.from(this.querySelector('tab-item'));
        this._tabs = tabs.map((tab, index) => {
            const btn = document.createElement('button');
            btn.className = 'tab-btn';
            btn.textContent = tab.getAttribute('label');
            btn.addEventListener('click', () => this._selectTab(index));
            
            this._headers.appendChild(btn);
            
            return {
                btn,
                content: tab.innerHTML
            };
        });
        
        this._selectTab(0);
    }

    _selectTab(index) {
        this._tabs.forEach((tab, i) => {
            tab.btn.classList.toggle('active', i === index);
        });
        this._content.innerHTML = this._tabs[index].content;
    }
}

class TabItem extends HTMLElement {
    constructor() {
        super();
    }
}
customElements.define('tab-system', TabSystem);
customElements.define('tab-item', TabItem);

2. 使用示例

<tab-system>
    <tab-item label="基本信息">
        <p>这里是基本信息内容</p>
    </tab-item>
    <tab-item label="详细资料">
        <form>...</form>
    </tab-item>
</tab-system>