Как подключить CSS стили к веб-компоненту?

Есть веб-компонент c теневым DOM деревом:

customElements.define('message-box', class extends HTMLElement {
constructor() {
    super();
}

connectedCallback() {
    const shadow = this.attachShadow({mode: 'open'});
    shadow.styleSheets = []
    shadow.innerHTML = `
        <link rel='stylesheet' href='css/style.css'>
        <div class="message">
            <div class="content-field">
                <button class="shadow">
                    <img src="./media/icons/gallery-file.svg"></img>
                </button>
                <input type="text" placeholder="Comment" class="shadow" maxlength="100">
            </div>
            <div class="send-btn">
                <button>Send</button>
            </div>
        </div>
    `;
    shadow.querySelector('.message').style.bottom = 0;
}

});

Этот компонент должен содержать css классы из глобального файла стилей, можно ли открыть доступ этому элементу к необходимым классам или же ипортировать эти классы, не прописывая все их правила при создании компонента?