Блог

Есть ли способ отобразить содержимое <details> элемента, даже если он свернут?

Я хотел бы по-разному оформить содержимое <details> элемента в зависимости от того, есть ли у него open атрибут.

Ниже приведен пример того, чего я пытаюсь достичь. Я бы хотел, чтобы текст обрезался, когда <details> элемент свернут, но увеличивался, чтобы показать все его содержимое при расширении. (Точная реализация обрезки текста и расширения содержимого здесь не имеет значения. Важная часть-просто заставить <p> тег отображаться, когда <details> он свернут.)

 details[open] p {
  flex-grow: 1;
}

details:not([open]) p {
  display:       inline;
  max-height:    3em;
  text-overflow: ellipsis;
} 

 <details>
  <summary>This is the summary element.</summary>
  <p>This is the details element.</p>
</details> 

Нет, вы ничего не можете сделать, чтобы содержимое появилось. Причина кроется во внутренней реализации details элемента:

Как вы можете видеть, содержимое скрывается с помощью установки внутреннего slot встроенного стиля на display: none; .

Поскольку вы не можете получить доступ к теневому корню с помощью Javascript и не можете настроить таргетинг на какой-либо элемент с помощью внешних правил CSS, вы ничего не можете здесь сделать.