SOURCE

class MainIcon extends HTMLElement {
    constructor() {
        super();
        console.log(this)

        let container = document.createElement('div');
        container.classList.add('container');

        let image = document.createElement('img');
        image.src = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80';
        image.classList.add('image');

        let info = document.createElement('div');
        info.classList.add('info')

        let name = document.createElement('div');
        name.classList.add('name');
        name.innerText = '微前端';

        let text = document.createElement('div');
        text.classList.add('text');
        text.innerText = '大型前端项目解决方案';

        info.append(name, text)

        container.append(image, info);

        this.appendChild(container);
    }
}
window.customElements.define('main-icon', MainIcon)

<main-icon>

.container {
    display: inline-flex;
    background: #EEE;
    border-radius: 12px;
    padding: 12px;
}

.image {
    border-radius: 12px;
}

.info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 12px;
}