Блог

Я использую javascript и lit-element.

У меня есть веб-компонент под названием «my-list», внутри которого есть некоторый div с текстом, и другой веб-компонент (называемый «my-table»), который представляет собой таблицу, содержащую список элементов с различными функциями. Внутри «my-table» я написал некоторый css и некоторые функции, которые выполняют некоторые действия с данными внутри таблицы (например, сортировка).

Что я хочу сделать, так это напечатать веб-страницу, связанную с компонентом «мой список», изменив макет таблицы (например: уменьшить отступ, или удалить границу таблицы, или изменить цвет шрифта, и подобные материалы).

Я попытался с помощью @media print внутри «my-list», например, с:

 static get styles () { 
 возврат [ 
super.styles, 
 css `
 @media print { 
 my-table { 
 цвет: красный;
 }
 }
 `
 ];
 }

Очевидно, что цвет шрифта элементов в my-table не изменится, если я попытаюсь распечатать веб-страницу.

Существует ли способ изменить css веб-компонента custm внутри другого веб-компонента?

Я подумал о двух разных решениях:

1. создайте другой веб-компонент «myTable-printVersion» с правильным css, который я хочу для печати, определите его внутри «my-list», установите «visibility: hidden», если я не печатаю страницу, и «visibility: visible» внутри @media print.

2. измените css для печати непосредственно внутри @media print, определенного в «my-table». Это не мое любимое решение, потому что я использую компонент «my-table» внутри других компонентов, и я не хочу одинаковый макет печати для каждого из этих компонентов. Например, я хочу, чтобы у каждого из этих компонентов был разный цвет шрифта при их печати. Красный для «my-list», синий для «myOther-list».

Спасибо за вашу помощь!

Элементы внутри вашего вложенного компонента <my-table> находятся внутри теневого корня компонента, который создает изолированный DOM с ограниченным CSS, который не просачивается наружу.

Унаследованные свойства будут наследоваться как обычно и в shadowRoots. И цвет один. Таким образом, ваш «color: red» будет применен к элементам внутри shadowRoot <my-table> , если они наследуют это значение, которое будет, если не указано другое, поскольку унаследованные свойства, такие как color, получат вычисленное значение родительского)

Но некоторые другие свойства, такие как «граница» или «заполнение», не наследуются. Для их внешнего оформления вы можете использовать псевдоэлемент ::part().

Внутри вашего вложенного компонента <my-table> вы предоставите «часть», которую можно редактировать извне:

 <div part="row">Table row content</div>
  

И в рамках <my-table> вы можете использовать этот псевдоэлемент:

 my-table::part(row) {
  padding: 20px;
}
  

Для стилизации на основе внешнего контекста вы также можете использовать: функцию псевдокласса host-context(). Но в вашем конкретном случае меняется не контекст элемента, а характеристики устройства.