: хост-контекст не работает, как и ожидалось в Litelement Web Component ⇐ CSS

[Anonymous]

У меня есть два Litelement Web Components-один-это единицы-list , который содержит множество элементов единиц-list-item . Элементы единиц-list-item имеют два разных режима отображения: компактные и подробные. Поскольку элемент списка поддерживает бесконечную прокрутку (и, следовательно, может содержать несколько тысяч единиц), нам нужен любой механизм, который переключается между двумя режимами, чтобы быть максимально эффективным. Элемент Units-list-item может переключаться между двумя режимами отображения, просто изменяя класс, применяемый к предку (который будет в пределах теневого Dom of Units-list элемента).

Чтобы уточнить, вот соответствующая марки из элемента units-list . Обратите внимание, что классы «триггер» применяются к #list-contents div, который является частью шаблона единиц . < /p>

Код: Выделить всё

${units.map(unit => html``)}

Как вы можете видеть, класс Showdetails управляет независимо от того, применяется ли класс «View» или «Compact-View» к DIV, содержащим все элементы единиц-list-item . Эти классы определенно применяются правильно.

Код: Выделить всё

render() {
const {unit} = this;
// the style token below injects the processed stylesheet contents into the template
return html`
${style}





`;
}
< /code>

Тогда у меня есть следующее в стилях элемента < /code> < /code> (мы используем SCSS, поэтому однострочные комментарии не являются проблемой): < /p>

    // This SHOULD hide the compact version of the row when the
// unit list has a "detail" class applied
:host-context(.detail-view) div.row.compact {
display: none !important;
}

// This SHOULD hide the detail version of the row when the
// unit list has a "compact" class applied
:host-context(.compact-view) div.row.detail {
display: none !important;
}
< /code>

Мое понимание: селектор-хост-контекста говорит, что это должно работать, но Chrome просто каждый раз отображает обе версии строки, и инструменты Chrome Dev показывают, что селекторы никогда не совпадают ни с одним из рядов. Изменив один класс на родительском элементе.  Все остальное решение, которое я считал, потребует, по крайней мере, обновлению атрибута класса на каждом элементе в списке.  Я хотел бы избежать этого, если это возможно. Два вопроса, которые я не могу найти, чтобы найти ответ,-это < /p>


 Когда: хост-context < /code> используется в элементе, который сам по себе является частью Dom Shadow, он считает, что Dom Parent's Theme Dom-это «host-stext his /the hise-stext wit will-stext hily-stex несколько границ Shadow Dom? Скажем, у меня есть пользовательская страница 

элемент, который содержит пользовательский список элемент, который сам содержит много пользовательских элементов . Если этот элемент элемент имеет правило: host-context , будет ли браузер сначала сканируйте теневой DOM из элемента списка , то, если не совпадать, сканируйте тень DOM страницы и, если все еще ничего не соответствует, то сканируйте основной документ DOM до ?>

Подробнее здесь: https://stackoverflow.com/questions/615 ... -component