javascript - Web组件稳定后如何添加样式？

Question

我有一个父组件，它在渲染时生成另一个 60 个子组件。渲染完成后，我的父组件添加了主体，我想调整边距、填充。因为我需要子组件的长度。

当我现在尝试将输出设置为“null”时，有人可以帮助我吗？

这是我的代码:

import './../components/avatar.component';
import RandomEmails from './../services/random-email-service';

export default class AvatarContainer extends HTMLElement {

    shadowObj;
    imageProps = [];
    imageURL = `http://www.gravatar.com/avatar/6288f2a2679a0242771aa6cc02e85980?d=identicon&s=200`;

    constructor(){
        super();
        this.shadowObj = this.attachShadow({mode: 'open'});
    }

    connectedCallback() {
       this.imageProps = RandomEmails();
       this.render();
       this.setStyleByRequired();
    }

    render() {

        let rows = this.imageProps.map((data,index) => {
            return this.getTemplate(data);
        });

        this.shadowObj.innerHTML = `<div class="avatars-holder">${rows.join('')}</div>`;
        //how to call after completion of this?

    }

    getTemplate(data) {
        return(
            `
            <avatar-block link="${data.link}" email="${data.email}"></avatar-block>
            ${this.getStyle()}
            `
        )
    }

    setStyleByRequired() {
        console.log('set now', document.querySelector('.avatars-holder')) //getting null
    }

    getStyle() {
        return(
            `
        <style>
            .avatars-holder {
                display:flex;
                flex-direction:row;
                flex-wrap: wrap;
                overflow:auto;
                height:100%;
            }
        </style>
        `
        )
    }

}

customElements.define('avatar-container', AvatarContainer);

Answer 1

connectedCallback 不保证元素(及其子元素)已被解析。如果您需要有保证的 child 访问权限，请像这样添加您的 Web 组件包:

<script src="/path/to/bundle.js" defer></script>

defer 确保您的 bundle 不会在 DOMContentLoaded 发生之前执行，并延迟该事件的结束，直到 bundle 执行完毕(所有同步代码) 。当浏览器保证 DOM 中的所有元素都已被解析时，这会强制将升级过程应用于您的 Web 组件。

或者，使用 HTMLParsedElement (我帮助创建的)，它专门解决了这个问题。

https://github.com/WebReflection/html-parsed-element

作为旁注:

this.shadowObj = this.attachShadow({mode: 'open'});

没有必要，

this.attachShadow({mode: 'open'});

就足够了，影子根目录可以访问

this.shadowRoot

自动。