qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
101 lines (92 loc) • 3.6 kB
HTML
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Element Query Explorations</title>
<link href="element-external.css" rel="stylesheet"></head><body><h1>Element Query Explorations for static (non-dynamic) HTML</h1>
<h2>Character count in text content</h2>
<section class="headline">
<h2>MMMMM</h2>
<h2>MMMMMMMMMM</h2>
<h2 data-headlineh2eleltextcontentlength10at1="0" data-headlineh2eleltextcontentlength10at2000="0">MMMMMMMMMMMMMMM</h2>
<h2 data-headlineh2eleltextcontentlength10at1="1" data-headlineh2eleltextcontentlength10at2000="1">MMMMMMMMMMMMMMMMMMMM</h2>
</section>
<h2>String match in text content</h2>
<section class="string">
<ul>
<li>to laugh is the best medicine</li>
<li data-stringlieleltextcontentindexoflaughter1at1="0" data-stringlieleltextcontentindexoflaughter1at2000="0">laughter is the best medicine</li>
<li data-stringlieleltextcontentindexoflaughter1at1="1" data-stringlieleltextcontentindexoflaughter1at2000="1">slaughter is the best medicine</li>
</ul>
</section>
<h2>Regex match in text content</h2>
<section class="regex">
<ul>
<li>to laugh is the best medicine</li>
<li data-regexliellaughtertesteltextcontentat1="0" data-regexliellaughtertesteltextcontentat2000="0">laughter is the best medicine</li>
<li data-regexliellaughtertesteltextcontentat1="1" data-regexliellaughtertesteltextcontentat2000="1">slaughter is the best medicine</li>
</ul>
</section>
<h2>Parent Selector (like <code>:has()</code>)</h2>
<section class="parent">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul data-parentulelelqueryselectortargetelqueryselectortargetparentnodeelat1="0" data-parentulelelqueryselectortargetelqueryselectortargetparentnodeelat2000="0">
<li>item 1</li>
<li class="target">target</li>
<li>item 3</li>
</ul>
</section>
<h2>Ancestor Selector</h2>
<section class="ancestor">
<ul class="goal" data-ancestorgoalelelqueryselectortargetat1="0" data-ancestorgoalelelqueryselectortargetat2000="0">
<li>item</li>
<li>item
<ul>
<li>item</li>
<li class="target">target</li>
<li>item</li>
</ul>
</li>
<li>item</li>
</ul>
<ul>
<li>item</li>
<li>item
<ul class="goal" data-ancestorgoalelelqueryselectortargetat1="1" data-ancestorgoalelelqueryselectortargetat2000="1">
<li>item</li>
<li class="target">target</li>
<li>item</li>
</ul>
</li>
<li>item</li>
</ul>
</section>
<h2>Previous Sibling Selector</h2>
<section class="previous">
<ul>
<li data-previouselelnextelementsiblingelnextelementsiblingclasslistcontainstargetat1="0" data-previouselelnextelementsiblingelnextelementsiblingclasslistcontainstargetat2000="0">item</li>
<li class="target">target</li>
<li>item</li>
</ul>
</section>
<h2>First of Selector in Document</h2>
<section class="first">
<p>Lorem ipsum <span data-firstspaneleldocumentqueryselectorfirstspanat1="0" data-firstspaneleldocumentqueryselectorfirstspanat2000="0">dolor</span> sit amet, consectetur <span>adipisicing</span> elit, sed do eiusmod tempor <span>incididunt</span> ut labore et dolore magna aliqua.</p>
</section>
<h2>Number of Children</h2>
<section class="children">
<ul>
<li>item 1</li>
</ul>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ul data-childrenulelelchildrenlength3at1="0" data-childrenulelelchildrenlength3at2000="0">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</section></body></html>