qompile
Version:
Compile HTML plus dynamic styles and convert to HTML and CSS
101 lines (92 loc) • 5.33 kB
HTML
<html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Element Query Explorations</title>
<style>@media(min-width:1px) and (max-width:2000px){[data-headlineh2eleltextContentlength10at1="0"],[data-headlineh2eleltextContentlength10at1="1"]{font-size:80%;background:lime}[data-stringlieleltextContentindexOflaughter1at1="0"],[data-stringlieleltextContentindexOflaughter1at1="1"]{background:hotpink}[data-regexliellaughtertesteltextContentat1="0"],[data-regexliellaughtertesteltextContentat1="1"]{background:orange}[data-parentulelelquerySelectortargetelquerySelectortargetparentNodeelat1="0"]{background:purple}[data-ancestorgoalelelquerySelectortargetat1="0"],[data-ancestorgoalelelquerySelectortargetat1="1"]{border:5px solid #ff0}[data-previouselelnextElementSiblingelnextElementSiblingclassListcontainstargetat1="0"]{background:teal}[data-firstspaneleldocumentquerySelectorfirstspanat1="0"]{background:hotpink}[data-childrenulelelchildrenlength3at1="0"]{background:lime}}@media(min-width:2000px){[data-headlineh2eleltextContentlength10at2000="0"],[data-headlineh2eleltextContentlength10at2000="1"]{font-size:80%;background:lime}[data-stringlieleltextContentindexOflaughter1at2000="0"],[data-stringlieleltextContentindexOflaughter1at2000="1"]{background:hotpink}[data-regexliellaughtertesteltextContentat2000="0"],[data-regexliellaughtertesteltextContentat2000="1"]{background:orange}[data-parentulelelquerySelectortargetelquerySelectortargetparentNodeelat2000="0"]{background:purple}[data-ancestorgoalelelquerySelectortargetat2000="0"],[data-ancestorgoalelelquerySelectortargetat2000="1"]{border:5px solid #ff0}[data-previouselelnextElementSiblingelnextElementSiblingclassListcontainstargetat2000="0"]{background:teal}[data-firstspaneleldocumentquerySelectorfirstspanat2000="0"]{background:hotpink}[data-childrenulelelchildrenlength3at2000="0"]{background:lime}}</style></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>