1.CSS-4

<h2 id="css4"></h2>
<style>#css4::before{content:"1.CSS-4";}</style>

2.ATTR-4

<h2 data-title="2.ATTR-4" id="attr4"></h2>
<style>#attr4::before{content:attr(data-title);}</style>

3.IMG-4

<h2><img src="path/to/title4.png" alt=""></h2>

4.B64-4

// PHP GD ⇒ base64 image (see code sample)

5.SVGEM-4

<object data="title4.svg" type="image/svg+xml"></object>

6.CAN-4

<canvas id="can4" width="400" height="60"></canvas>
<script>
 const c=document.getElementById('can4').getContext('2d');
 c.font='32px Arial';c.fillText('6.CAN-4',10,40);
</script>

7.WEBGL-4

// WebGL canvas – omitted for brevity

8.JS-4

<h2 id="js4"></h2>
<script>document.getElementById('js4').innerText='8.JS-4';</script>

9.EVT-4

<h2 id="evt4">(click)</h2>
<script>document.getElementById('evt4').onclick=()=>{event.target.innerText='9.EVT-4'};</script>

10.COM-4

<h2><!--10.COM-4--></h2>
<script>...extract comment...</script>

11.ENC-4

// atob(<base64>) then inject

12.IFR-4

<iframe src="title4.html"></iframe>

13.PDF-4

<embed src="title4.pdf" type="application/pdf">

14.FNT-4

// custom icon font glyphs

15.FRM-4

<input value="15.FRM-4" disabled>

16.OBJ-4

<object data="title4-content.html"></object>

17.EMB-4

<embed src="title4-content.html">

18.SHD-4

<h2 is="shadow-title-4"></h2>
<script>
 class ShadowTitle4 extends HTMLHeadingElement{
   constructor(){super();const s=this.attachShadow({mode:'closed'});
   const span=document.createElement('span');span.textContent='18.SHD-4';s.appendChild(span);}
 }
 customElements.define('shadow-title-4',ShadowTitle4,{extends:'h2'});
</script>

19.B64SVG-4

// <img src="data:image/svg+xml;base64,...">

20.XHR-4

<h2 id="xhr4"></h2>
<script>fetch('title4.txt').then(r=>r.text()).then(t=>xhr4.innerText=t);</script>