Добавьте элемент html, который является «невидимым» или пропущен по правилам селектора CSS - PullRequest
Новая
       30

Добавьте элемент html, который является «невидимым» или пропущен по правилам селектора CSS

0 голосов
/ 18 февраля 2019

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

Пример: 

<div id="root">
    <foo:meta data-source="document:1111" data-xref="...">
        sometext
        <p class="quote">...</p>
    </foo:meta>
    <p class="other">...</p>
</div>

Этот HTML-код генерируется автоматически, начиная с уже существующего HTML-кода, связанного с CSS: 

<div id="root">
    sometext
    <p class="quote">...</p>
    <p class="other">...</p>
</div>

#root>p {
    color:green;
}
#root>p+p {
    color:red;
}

Проблема заключается в том, когдадобавив элемент <foo:meta>, это ломает селекторы дочерних и родственных элементов CSS.Я ищу способ CSS-селекторов продолжать работать при инкапсуляции контента таким образом.Мы попробовали стиль foo\:meta{display:contents}, но, хотя он работает с точки зрения сокрытия мета-элемента от средства визуализации ящика, он не скрывает его от сопоставителя селектора.Мы не создаем HTML / CSS для обработки, поэтому писать их определенным образом перед обработкой не вариант.Они приходят как есть, обычные HTML-документы со связанным CSS.

Есть ли способ достичь того, что мы ищем, используя HTML / CSS?

Иными словами, мы ищем способ динамически инкапсулировать части содержимого в невизуальные элементы, не нарушая дочерние и родственные селекторы CSS.Элементы должны быть доступны только для обхода DOM, например document.getElementsByTagName('foo:meta')

Ответы [ 2 ]

0 голосов
/ 09 марта 2019

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

Однако,для любого, кто наткнулся на этот вопрос, мы пришли к тому же концу, применив следующее (я буду кратко, только указатели):

  • , используя два комментария, чтобы отметить, где должен начинаться тег/ end вместо XML-тега (например, <!--<foo:bar data-source="1111">-->...content...<!--</foo:bar>-->)

  • эти указатели работают более или менее как разметочный эквивалент DOM Range и могутработать вместе с ним.

  • у этого подхода есть интересное преимущество (в отличие от одного узла), что он может начинаться и заканчиваться в разных узлах, поэтому он может охватывать поддеревья.

  • Но это также нарушает структуру XML, когда вы пытаетесь ее перекомпоновать.Кроме того, с помощью манипуляций довольно легко закончить с перемещением конца диапазона до начала диапазона, перекрытием нескольких диапазонов и т. Д.

  • Для того, чтобы рекомендовать его (отправить следующему процессору XML илибаза данных noSQL XML для перекрестных ссылок), нам нужно убедиться, что мы избегаем манипуляций с нарушением XML, описанных выше;затем нужно только преобразовать инкапсулированные теги в обычные теги, используя строковые манипуляции в документе (X) HTML (innerHtml, outerHtml, XMLSerializer), чтобы получить чистый XML, который можно добывать и перекрестно ссылаться дляcontent.

  • Мы использовали TreeWalker API для сканирования документа с комментариями, он может вам понадобиться, хотя сканирование документа с комментариями может быть медленным (работает длянам хоть).Если вы смелее, вы можете попробовать использовать xPath, т.е.document.evaluate('//comment()',document), похоже, работает, но мы не доверяем всем браузерам.

0 голосов
/ 18 февраля 2019

Если я правильно понял вашу проблему. Я бы предложил использовать пробел между бабушкой и дедушкой вместо '>'.Также ваш селектор - это идентификатор, а не класс.Установленный вами селектор выбирает дочерний элемент следующего уровня, который является дочерним.Но добавив пробел между ними, вы сможете выбрать и внуков!так что вы должны сделать это 

#root .quote {
    color:green;
}

Дайте мне знать, если это помогло.Рабочий CSS * здесь

...