Мой запрос странный, так как я использовал другой подход, который полностью сработал и стал намного чище Тем не менее, SEO позвонил мне и сказал, что моя структура не очень удобна для Googlebot.
Итак, вот ситуация (пожалуйста, не судите об этом, я знаю, что есть другие способы сделать то, что я пытаюсь достичь, вообще не используя дочерние фрагменты):
Это мой компонент:
class Container extends LitElement {
static get tagName() {
return 'container';
}
static get styles() {
return css`
${unsafeCSS(styles)}
`;
}
render() {
return html`
<article class="o-container">
<slot></slot>
</article>
`;
}
}
defineOnce(Container.tagName, Container);
export default Container;
Вот как я это использую:
<footer>
<div class="o-footer__collection">
<div class="o-footer__main">
<h1 class="o-footer__title-desktop">
me & me
</h1>
<button
class="o-footer__accordion-button"
>
<h1 class="o-footer__title">
you & you
</h1>
<span
class="o-footer__accordion-button-caret o-footer__accordion-button-caret--open"
>
blabla
</span>
</button>
<ul
class="o-footer__main-content-panel o-footer__main-content-panel--open"
>
<li
class="o-footer__main-content-panel-list-item"
>
<a
href="https://google.com"
target="_blank"
>Contact</a
>
</li>
</ul>
</div>
</footer>
Видите ли, все эти дети приземляются в области slot
компонента. Первоначально эти дети были частью компонента и имели стиль. Теперь они находятся вне его, и стиль больше не применяется. Кто-нибудь знает, как обойти эту проблему? В документации я обнаружил, что вы можете использовать атрибут css :: slotted (), но, похоже, он не работает. Или я, вероятно, сделал что-то еще не так? Я также пытался поместить тег style в html render
, но это имеет незначительные последствия.
Я не знаю, на каком маршруте мне следует сосредоточиться. Любая помощь приветствуется. ИМХО стилизация должна быть частью самого компонента, а не парнем, использующим компонент. Но этот элемент слота сломал все, хотя остальная часть структуры все та же.