Replace Divs With Custom Elements For Superior Markup without JS and prevent hell "Divs"
Tags: html, css
Published: 2023-04-30 17:00:07

A nice article [Matthew James Taylor](https://matthewjamestaylor.com/div-custom-elements).

Here is an example [CustomElement](https://flems.io/#0=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-idD+lGhXkSdV3BNXas2Lq4RAAvcg5AwCaKgA-PqjAMBDB+OKcstgaA5W0OhcgXhrBZEMCRWa8BGDShDXgdw-dvA6CHs6mguYQDJ1TkgGu0FPzqSyMwONCbuBmyTaQMglBKXprwJmlO2akAVGQasItJbE0UG0SHDN5gs05sIBCrwabG3xtLTmnF9bq1Nu7aWZeVbO2d1gEgAw0j06jskEgautdp3FqbV3Cx1wZ2wBvEgZt6k13BpPCKNcuhXJSllEVHQtFZDimAMtLwSBuCzmAAgKypA8C8FdiHPAGcVYN3ML3YwaATzEyfbqf9ZljDKuaoQXKTD6ikzqEeAA1Ahy8DUWLcHdYwRKvl4C2GogjP+1lwN+0gxho8hAvDAjxeKIkjF-U6FvUlK6jpSCMURiBgABgAEmvScdjWHxRfnFLwEN1wENBQ2QYWu4oQg0GUIwEIHQ8DoQgnQtI3lfIDx0EgjofzxTsdCNx3gJxcymFM4QWwIRGDscsRAcCGB5B7nFNcDAhAU5ScaLwaD4SRB0mlMhkN9QKA+E01+UgFBSBCRFIQXgLB8g3vPPqT5EFRNYROCcVQIKzZHhaDuXYd74qqlIMOcUlQUzvN5A2IiVphzmD3KSKdIBHTqhjDqUgZpSA0H4kSMAqhKAGUga0I0jBhwhHFF6JAAA9QcthpScZCPZ7pvp0NNF2MGs0IQJtjaQMoQcnHpTzYc76GUXonNid-aYPUWBiACkaI0JAIYQDIYQ+YW7pnLuUucIOPWpdgwpa4zx9jGAJOkuk7Jk08nFPKYghlj8WWcv5BwEgR9g0dC8H4xnH4eANsmfM-JhbjmZSykYwV4wRXBwCl2IFFjwAG7OdcwEEi9A9T9HdY0VbXmZHQ8yycJKVEqc1ZAFGITxh-ukF4yGmnZ2QAAHJpfmCPDD3gZsee+Vq+qbRgVlts4dfTqTeoQ7SjNKhEr0oBcXr6qqZrDZqcpfMPd8wyG8CffVgr7nKunMcKgDoNAgVeBmmF6L8XliozgaphUb19FI2hfC5Fm8MX8gii3uQeQXveI-HVLuceDXktic88DqT2O5cgGGzj2w4OFNKa57DiydHRJ-e42LwH+eSIybM2XiHlfXew+y3RqASB68A6B4syTLeaDS-L5DqvSue87nUP3sTgem-D5B63kAE-O+K7h3RrmSAkrG5Y7KW3yAHtPZVLL3uX3dhd6VycQLEeQtheJuYFM8IU5e9UCmT+2eZ-5BzZvo88YvAnoYgpY4ewWUej+EWz+3Ar+0AOgH+E0qi4EaW2C4owGHk9A3AaoHOsG8Ayg3AiG-m+Gt4WBLUHSryxEhSM0ZGFGuKIg1GtGuWd6gUpoJo1GNsU+W+O4hwWBqosAXoGc+wKAzBqo5AAhxgWASAgk3A0oJ2NkHI+01wnu3un6oseAt2m4SAXMWAmuJ2GcMsGhwY7BKshh1+XB+Qkh0hsh7BpshhIhxgEA4heW7BBhjQm4ZhP+OgIsSAT8fk1hGcLs+09wbkL6O09hYhGcIg9hEA-uQRIReAm4qhnGQmsht6uwnBnhO+vhMhxWvBxg5Aw4eRjh7BEsdheRLAehxgpcrsWECGKsocShcB1ESA7B1RGhNR8AdRIcxgjRXu1EGR8OOgpcPhfhhRgUBRg4RRlRpRbh3Rmh5R-uGc+Aoc7h-+gxYsIxORg4fk4x4hUR5R4hiOUxGcyRwmXoaRLRGcbRsxbsnR9RPRyh-RHhgxiO2Rpu2xWAIsuhGcc+uA3x940R4hpxqRSAzhGO6hbhIazxdGvxXxqo3AixxgqgAxveSAfx8JiJyJ0JO4okbx4hO+RRiJwJ5xoJKJO4qgmxshAR4RexgJJxKRJJYJ-MEJqxmWnh+xgUjhX6lxzJphaxdGwhhJbBX6ZJ+QuwgpgUxAThBJnJThPJZsLJopOguwMpqoUpGcYAdJ6s8pip2Jv+9hXYX6wxeRxAiJHQSpuwxpgU-BX6RxjoxgrB7BCpfJbJgxNI9h6pNsaAOpLp3egxVIHp4hDIPJYAup-J3BeWGpLJepjYgZGpPpkJMZmpxx2peRNpNs3h3A9pppwpxgzpiZ4Z+Q+wmZkp4hHQWpTJ+ZrJfpdGQhHpZoZBwwBIVoVBdx0opZxhMsSGmhLhYZrpdGt6eRjpghYsSp+wGxeRERNswx7BXgfZNZ3BwxVhchpkgh+Adhs5850+-prxfhZo+0qowRm0oRVJ-M4R+5gUR5eAJ5tJQpB5xgV5N53JVhxWGcc5vp0+gBwBSAGcvR3uaWKW5kDU4aJE1ws0rYrEuEL4aM8gGC8A8ANi7Q+i4o7gTueAV0lE6ReACCxgNAmGqBR4rYGAtoxyVWAalMxBVkHkRFT4YWL4ZFNBlG9BOU3AxES8mojBYpSOqGQUY8C8mg3SgGEWwGWB9ANkr4UiMiR4tQpAhBMhlFwAlc8ASaeAr+28c6JwaoNA3AmGSUG292B2i2KRrGBGLEEGeEhANACGnmuuJE+w0omGh8kor6s0t2cMt2slqBDUjgKY54Jlt44l2lmGV0hWw4FO-O2xoYB6YoUYVusYpAv0QVpOD2e4RIGuGJJo++shUqkoQV15wYjIzlcMfOhWXov6yAB+aWqm+QelE2Bl+OvoQY-lSMRGDKFlVlUGtl4o9ljlzlwmEJ7ljQL6UV4YWKluzosYYgiVvAjAaoSAOV8ANAM1Zkc46W3OgxwxtV9Vh2yUPQbQEuPFOUPU74cgZF6FrVJGyGGAe1NlbmdlDl-GPlf8vUtcsYZFVMBkN41gYgUq1oRoJEcM7h1VOgSUau9WWkTWE1OoCJJo6GXWPWfWwI1gg2pAwajGINz1FWb1xE6EnYYghRGN5Wr1Ooxk6EBIVA-S640oqBwGNk3AOBPmKs+08AkEtg-6R4Hl0o+08EX1fgv12CANNAqNLlpMsAO4XlbGlQsYMhTGpODZn1sIP1f174JWhN-8xNHgxEXopASAKM0FrUn4rYiWZFJuCRKmYt+QPNit-N-14oetHEBtsFxtxEfhZtR4CCGAPwCizFq1JwEtBG+QsYCC0oR1ww9FxEQ+ZUFU9M7hZ6vo7gq15uOg6EM016LMsE7GJoAAxNxjlHik2ZQb6NRPZuQPxFnh0OKHOEeOxn7dFXRIJJeGelzCgMoFhGaHgcYDgGgMODgGLK3YmCaB3QcPsLXaNY4L4Y3enY4DgNlMOBrLPYOAcAvVgPsAvbsDoTdKPYeo4MbpPUNMVO3SXWXeDYFHZP0p7RQNoFbkfeXVvWeMkXvXpLVmQBAOniHkOIOGrmlXXAvYJpuHfXRH-aelPYBIlmHZ0iAAvYBMCOlalkncEVKOhcA-vbqC5ndW5DISXV6j6q8v6pXQA7oIVYg-JSxZcPOvAE-AglyIFHqP7ixK+J6t6r6ng7NCxM4BgLyguO8ZtO4KIIYFw7ITlAioUuPJPAJChRw4NFw2ZEg89C5oNCI-xfIBgzRHXboE5SesAKQ1XD1LXJQ9Q6qLQ2wfQ1g0w7g2kJXWBuw5wzKMODw3w4QAI79JHQDBovPBPAJeI7wzY6w+DC4y0u45PFwwQ44AtStYtMTN5RjX5ZRYRmIEFdJS5tCoGHYvUEJK9tpM4wisfISN9USOdCxs9ElWLicDlOIJIKTgkS5qpOBlU+VKFOuBWNiLiOpGfQ5FmEfBQJqH4PkxyOYAAPr9PdKgKeiUo06crKVUSzjzRHgOAOANT9PlMYjjBfCTgTiSBzMwHDA6D9MHwODwiVC7P+pl01xmwrN4WbNJ3rD9JSp4NcjozSg6ByjRBiAfA6D8QBKB2RTwH+pzNiBHNpAnPEBmye3e3igAubh-M+Q6DgsHxAsguSX1A6C2DKmKSPPPOmBrJLDfVCTowYS6iQFIA7NwttDAuMj1MsC5A+C+UaCtq3MWPSjgR-OYsQvwvnOMB-MnB-NvPXObCR4+AHyciGLzCVD3M6BGi6gdQAIvPQsLhQ3ij3OPOBQ6DS51aqLS6MsvMssHwrP22vi8o8R4RSpEhcjTSKubPat0YTD3N-NnoQsOBcvRDcBXOqAKsPNPN-O8s-V3MPMOtVCfCtIYqEC7gQp+BPhrJOshAABUt2sbcb8bCbibSbybKbmQ1kH4XutFL4xLvzjgOgKbBbhbRbSbUbPczrajjgvK9LAaHrLzdrez96mz0bxbLbrbybabjYKOtFJ1Vk7ywLOghopyMVebbbo7Y7pbDgSdeL6EvK-ETl6LtrU9ObgLpLCLMGIgDrTbMbY7O7xbabCK7zq7pScg1g56Ere4-1XualQQI7u7d7KbE75bY9Og07CKc74oc7nIYAhAXQEw5gr7g0c74EtbmLsrc7yLy7ZKq7DNmrmLmL7QOL5g0eErvl5gOgCGOg37XQGH6kh7pzA7NSp7qgdCEeVopy74XuQH2kfz1VzLYgXgEU+QsLxz0HiLIgEHc7sHWLlrO4EwrL0HhozqXH9bLHpzDNm7kb27970n8bHbeKSoCpINOo3b2bg7KiugnYuoW87Q545AegIgaceb+nZzmn8wmepzbH8Byt+QXtranIQIgS5n-bkAhAQwdBqOCAfgabMnPnsbj7U7GEeKZs77lAk0cgKz9A54xyKz5gqEnYpy0iOgUWxq3rDLwHGL-gOo4o07s787Ogjo4rkUWQcgXH8Hnnvo-7+L1g4WRL-H+HpyZq+QLnbneK+bkwIA6HUXVkOHqwVnAtRLaHGHoXxX3X7XnIMWkCA3HXGHOXgH87wnS7dXwL4njbknvnvnab8LjQx8AAP2GF0CwDt5UF+CmI17AGGGbGKAoGmywES5XZ5GnSg5ppZKQOoJsOKHqESGao84604Otz5-5xW-pwp++ywJyGIMcguy88Bt1Cs7N2IO+1x7TSjhML5Fx9O0F++91OD5D4uyg1BBJw4M2-99Jx200toO+DoHlFZDq0tFak54p0VMG2y2p2KPyEZ9C8QOFwipyMlxsKlzVcGxfAgJm+F-4BIkZ8N+F5p8CgDNAHaGe5UIdgOzBIOzlNyDqOBxN6e3zzc7m04CDcG5-HCtYBRAS+Fph90tFsAob3GJ2CBLwESLWLeyT3e4D8+7r5sNW+KFz1ZBMCrIV2F37-mwH1hzF5WF9fz9W+l389gjC8BhABF0eCDToMoHoHIMnxAEhlD3B5lzC0t2u95qnxMNRCB9x9i34Li1V4S5B2y2nhnr5YJ974y9R1q1i5vnRycJK2kHRzx-kHxyS2J4J5Xf6+mxe5T6Fwzxa1i7K1L1ZGzd7jn+X7K-D4j-lxMHP6V+Xwh5X5V+hOb0aLV4P-2w10152C1+x40O1512Hz15yMR-19f0N0V+F3f6jiwJN0-y+xhLl5XVv465iwAGvNPgnPAzpyHk79t4WlnbXpUEE7jAJgQXPHqzAL4rcABknfNq70wGFsO24UBTpyGhasUrQtvbVHhHFaVA1WU6Izo7XyDVxHAdPMAJnnBodtOetvBUP0k5Bno2mVkWQLAD3hGcsBAg5Nu723rGd+mhAkiMQCX6ys4qvkSQfAPa4UCtIS-TFsj2D7UCuoPUPqJyAwpxQqAW-KCJ9UQik0VmxAOjmegJ5t83m6bFBiKjEAm1JBnLbvnFiXamDVulzIHsI0CYCVHGdCcboEykFZcZBQmfwfILBpIFtIo-XAf2zj6KDUcXg+QAb0SEG86OfFCeCswy658v62iIlqkNUCd9Ihsgepr23LrBttAHrIgOrkpS5C0BmLHlijlyHeCoWgQ+VrkKVZ-sQAbAw8MoOAHvM2kwIHQAACl+IjIVCruHqHxDukGNT+Oig9DtBeBdHLgRgF4SONWhwUI0F+Brj0Fzc4oXhN0JUEo5X8KzXITQF4Qcs2+oHLLrwnX4KDKhMfc4VizoTyMxAijDxso14SchX8EEUfkRBwQ6cGhDmXvuZCcFPNR+B7Mut-QHbDBLgkCYNp-ggAzDGUVAPgZkKxbAZtmEwV-C5gES+hpcR4DVsnzeb8IU4xQiEYaxfDvx7h8HUgGsNIAbCqM2wnqKlD2HL8sujIljCCLeZchoayeXUMBAzzJDKR5fYDGbGuArM2RWI4kUJAexb8URFwmFiKIZryD7KZfWUUKJRw-AVmIougA6nHhgBK6gI1UcBlFETAtR7OXUfqMFEojHhqVBAE8JybdN1Q4oTHJiC+GEj1RXTPJgaPL5ADVRPo70TKPMid8uOQAs9JKFgCas0BxPQQW2w7bAJEIOnVtAGD0CaBz0FbDAPiBBQOZUcxUKVlZF6he5Ro40KABSIN5lD9QeNVROK0Ojn0dA7FQXowMrEpxSEKraYXLhd7RiW2wgs8NQKoIKhweGoPwaIyX6qDdWWMfWpmPai8ROozWLjp4NEbeCSsg0QcQvC44Kg0wNMCaEDCggLd8eg0QnpG0+AdijxjQInp8GoFVijo9GYEOx2vCuJsxBYiYVBnxDkRwuLQRwMRwSzRcJWnQiNm81yG29eogw4Ye4EaA-jyh0AO3KA0US9dkgeUIRESzABEgEgRgR1m82PEdjJ2QPdQc1mXETxwBw4lHHQlHFQUHaE4skf+BnF-NgMxALkAUjCyO8Vm4oZwPRKJAGQ6Jy0fJpIK46ys5BGQvPnKxaw+82hKrHxMR1IAasVRWLYgCs2PqqIhJnfafnKIEkughJ8g1VuXQkl8TMWjwwyMhDQj78EB+Q4GlpP4k0T2JjvZkdpNgDriix4oDAPZIcH3Cu+xkr0Y8MLG0wgYkg2Zk5MUmBiXmQA2Vq0MklzilG3SMMbhORKcskBsUOhPuNPEYD0JAg+Kc4A3Fe4wJrQZMXRXC4Ns0JiUpKU+xEHuSJo3vXiVRMIkmCDOYgl2o5KUkQtHmELGyR5JjpccXJlgkAVlz1YYBesUAGjHGDHEcRuprEoqdNEhZt9ZWnUwaY8wmnughpqUoGKNNz6tSURTEAtLlHIAV1zAV0HQDKh6lntLQU3TrnyFsGxISugIoqApP8nRTHAM0CTrlLymYDkpqUi8f0jiGZSe2PzHcLQQhQpiIBZzOPrJMoF3T7pJPTCc+36bDSSpOfGVllzql0cGpw0zyS1Itp0dppPUxqRNHkl1sl2mMyMYeOBmu94pQwUhES3PEkDs2X0vQC+LzETRUcqU6tq9JU7ZTc2f4x8QBMcBDCRhoE6sXyzlAgAIJyAKCYina7IT4JmHJCXBNQl4z8Z-3UGSIKJkkQcJcQ0RvhLL5noIZeDbCQOKVkLx8JEYptp8C8DLQaYUtRwPLPmZsYGBEwZSUqxRY+8qZEUoMOMBRYZd0CsAYPvLOUkOzwBVMpGa+CUorMrcV0yVhGzQFJ1ph4oQgBFKX5noPZ5gaYbh1yGcggw+4hqA+EtkwsdWEwcOeVW0HxQQ0TssYVHzwYHxNWDUdQGnJWae8Be3k2WWeCWYRyShnIeyS5lBB7hgQmgM5FDycAiViIKzRZhIFgANzwakcnQM3MICtycUHc7YJqycDqyLG4giCGmzPTiC4pvINjKhDZRPx0hfzUMn8zTkaQXm5cq1AfMxZLN9x+YJMRlw3lPwHWqwIgClzORKBDgxwM4BcAEBKAHgTwEALeJfBKAHA4iAsFZGABRpN5OgLvvQPa4YAQgYAW4J-N-RryCMwAJZl3wmDXya53AYDLLw9CbAjawEUCP3xhY+JOQN1G2as0kDsZJgebZQH0CwVvcrIN1UCeNDtAVgSUyMkACi0oWJDlAtCzYI0F7Q4YO2BvHJtgu4GkArQlQbjD4i76CLQgPCsQHwpgYCKjOqfORc0CplRAkhKiigCIsaBkcX66edcBos0U6BuMN1a6t0n0VihfuSQ2RdoroW6KLFpIAxZEEEVOBlA4iLoIQDzTGBTFvQezCIEGCqA+A7ALvtUBkUhBVFP8uQCizTahAaFdizYFEHYybNqJvQToMROagYAt41gPhClyfwgB5gzQNJetKZa8hilHQNMDAC-DlQ5AuNGlIhCEj6AAgacXrjNALkgi02wGAVMHw9TKpBontMOqdRvh5sYebQaCMGwmDdLrqvQBFDHCYX2g82Uym6rMtya2gvcEwd5OMtCEFLXudcHQF6Ha6sKe+HXKbvuG3hocHWjzdwc+15SDIJoVqHkL6CGB6gu51g1mJQhEDBRcgxMD5UDnzFWoR+UbTDrwBeXJ8JOlC4DLEF0BZz+pr4bJaQFyX898lUK+mpYHEXAdKFKKmOLyDcxnMrZpCpwMArTZYrdJRtaLu0NyD4JpEzc+BU4Fix0E9MIkf4B8A9BgBEJjwWQGREhByLCAIQbjLcv+VgBHl4oDWNRHFycKDe-ihQIuImUosmkn8y9CGkEVSqJQHKxwJ5EJUSrEhIlQYP0zkUrN3AgS6wD73KXTK2gsynxMMH8CBBHZGHXYK4r0Cmrll-Sy1SMBtUrMfEeqhJVZAdWLB2g609GXTEyhOjvVuCh3so09VyLOQaq-OQ6pJWGprAZK4PuYFcBe5NMVq0YHXDTazg-WKSlHKoDEA4q8gKzPqSRLhXbwEVWqJFVAVXglBOVKQWEBiocAFqi1aQbFU0v7b4qC5zzJwMxI4nBQKAeov1Z0HBAFQyKQYGkXSOYpuzu1Dq2VnQgYYrRp4AgbZXO2cDuAMVPa4xTCwXVZKK1iKnVDWviXug6FdmZ1a+FWUK92hRyuuDPKSHWKc1bgp1nfK9aPy9gO+XYKcHOAgAlKH84gEYDvlRKxASgQabWycAthgWHQCgPtJ0BZ1h6IsXAN5LQHHqRFYGs9nIEaAkpIAvAqblqg6DkB8gT8LkPLhu4vBGgPqIxCAXgKhdvJ3Qe3gYCJBIBEQj4LLBKtoqEBD+x7SBLRqvFQB6gWhRSD8D1A8bP43UBjUxtyDAskNmzFDXQpoAMLL1WUUMO0GOWMAnAqi-hToAAB+A7b1WopPbhct1omh3oxtYq2hpNTrWTZsHk29BGFCgZhYBF2VFh1NemzTTpsiVUy0Nxm8Tcxqk1ptdEQIbgI0AQAf8iW6AITRZocCqK9FTis8EZvo2O8JNLGnjQFpTCNBesEQTUlSAi1psZAuQHWgxyRqRbuAGmxRV5oS2MbfNWWXLZQEP4UcUtyqFMEgGy3UIn1HitDRRj41RFKQgm4TcSqNDiKiWuwITbuEoBwFCt8gHjT1BgCqJUAOW+9C+ofnbAlAWADYtrFODMAf1lwJQP+pIAKJtAAgXMacCAA):

```js

import { MVU } from "./mvu.js"
const {html} = MVU;

let productTemplate = (num, data) => html` 
  <a-product data-opened="false">  
    <product-title>
      Product order ${num} 
    </product-title>
    <product-content>
      <product-description>
        ${data.description}
      </product-description>
      <img src=${data.thumbnail} />
    </product-content> 
  </a-product>
`

let catalog = document.querySelector("the-catalog")
catalog.addEventListener("click", (e) =>  { 
  let target = e.target.parentNode
  let status = target.dataset.opened
  target.dataset.opened = status == "true" ? "false" : "true" 
}) 

function getRandomInt(max) {
  return Math.floor(Math.random() * max); 
}
 
let button = document.querySelector("button.adder")  
button.onclick = () =>   { 
  button.innerText = "loading..."
  fetch(`https://dummyjson.com/products/${getRandomInt(100)}`) 
    .then(res => res.json())
    .then(json =>  { 
      let num_product = Number(catalog.dataset.numarticles) + 1
      catalog.dataset.numarticles = num_product 
      catalog.appendChild(productTemplate(num_product, json)) 
      button.innerText = "Add new article"
  })
} 

let btnclose =  document.querySelector("button.closer")  
btnclose.onclick = () => {
  Array.from(catalog.childNodes).forEach(elt => {
      if (elt.tagName == "SPAN")  {
         (elt.querySelector("a-product").dataset.opened = "false")
      }
  })
}
```

```css
body {
  background: #122439;
}

a-product {
  font-family: "Segoe UI";
  font-weight: bold;
  display:block; 
  cursor:pointer;
  width:600px;
  display:block;
}

a-product[data-opened="false"]  product-title ~ product-content {
  display:none;
}

a-product[data-opened="true"]  product-title ~ product-content {
  display:block;
  margin-left: 50px;
}

product-description {
  display:block;
  margin-bottom:20px;
  color:white;
}

product-title {
  display:block;
  color:red;
  margin:20px
}

img {
  width: 200px;
  border: 1px solid white;
  padding:5px;
}
```