Shoelace a friendly components library
Tags: css, shoelace
Published: 2023-01-27 14:53:47

Better than thousands words, look at this  [demo](https://flems.io/#0=N4IgtglgJlA2CmIBcA2ALAOgMwoDQgGd4EBjAF3imRAwAsyxYR8AzCBA5AbVADsBDMIiQ16jZiBIB7XhVnUAPAEIAIgHkAwgBUAmgAUAogAIxsAHwAdXgtNHY-XgHMAvBZDxeby5+u14-KG8jYKMFITJ+IxJafgAnIjJXEABVLQAxAFoADi8rENDwyPoyAAcM+ABHAFcIADckgA0M5IBBDI0pMBL+MggAIwQ3KJk5RLcASQNnSkd4XN58sPgIowEhJNqIeAB3EqlYsiHpWQ8xkG3oMlpnKHhNkngMi6gr3CMIXghe-lgMghIfvBnABGDAABnmi0Kq0EQLct3+sQgJV6MiOI1OSQItCkxH4DyMtzAUkhIQUsA+AGsjLFiFiyABPDh+ZZDWi0lhJDAAemxuPsDwwJAIBFJwQUiORZCMjJKcPAUigVUGIDy+RCBFiJCSxRKBCQ3O5JCgvAwACsCLcKbVYhheMtubwSmBuQABPl4h5-RkIXk4z3wV0AJnB4O5UAgBDIRs6e3tsgI3L6VTIZBkSZTadNFq8Cl5JCRKKCZMlKJlDLlSWJSpVavVRk12rcuv1huN2ctxDqtvt0adLvd-oFjyjTPgfv5+MDIbBYYjUZjXRkp0TUFi-G28Fi4fXm9tOZAZjzpbIxfFvTICDMKikJCqQlkeYvV7roVHL4W9aMfUVDKMwFfL8jCkboSC+BkkCMWcwWBABuQCQgAXysBDgh-KAGQwWkAj-ADPyA4IQPxcDILg1D1TIddeAIL4IBkSDZyDABWAhgNA8D4Pw9VkK448fXgbw8z8AJvCsBR0IZM831+ZNUxkKJ7BFJJHFpVkQGCWo4ggBwzhKJEwDiBkvAACQMWBYCkY8ZMzGQpIlX41w3Lc7H4Po6TcFRdy3MV1QAGX2eAwHePV70JKQLNiBsviMWEyDeY4iHIZYqkigJkUjMCnCMLsyAwcj7IyWSswbCyzhYKQpAoWIhk0pEdKSPSIAM2IjMPcj8g0CyiHy3lrLk3g7N6jJHL3UTeIIPripIRSCCSECPG8w81DlawhqK2zXwlAspSk-IEGlEbnOcMK7wfXLqi3BkAGViHgch9gACjcCbhq86qQAASnI-ajBU+BlgAIRshZjqgW971ODALpam7SDTWInpoP61K+ri9uWNiPCB-qjFB8GzqhqpLthu74cRjB5vtd7UaAn7pqkIhseK0G3sJ4nbvuhHnsmtFPvIymmZkCneGmiASGpY6jAej7cbMQlWb5bZpc4oD6cZ4HhdF8XcalmXnDlw7bVoaB4GV8jkbIQXTRkLWJd12WYoQA5EeM+BWppsl80LU9NpPctKzcatlTmNq0ZCDd+GivRYk6SN4AwH5YBu1MECgB6uHakI7yjTozMClcMG2PxeBUeA2HtNOAHIXvW3hK4+3BM+CbO0zAPOzoIQvi9L8vKAe6uHLe+vG58ICAF0PpVr8wdOyGJKFGbfMjXKAir7CMPrqfxS9naxKTX8xqEhhzAkIg4bo6jqCYpikAAdgyMEkDBEBENwPhYWoc1OHwY5RmoF+34gDWMIGgwpv6SAxPIEQSAY6VRHkgHEUYR4YBelcfOGQKSOHoP+NU0gIp-GiPnSCmD6CcTVBkP4vw8H7AyCpfgDIMhMUfiYCaD0wRQQAKRGAAJy3wwExDhk9yGUIyNQ2ItD1wMOBGCZhtBWFBjQOwzAWQuHcKYhgbhgip4UJemIiR9CMhBhkZBORsAHoKPYeozRPCwRaOEbo8KNC6EMKwMYlhZiLFGEwNYrIWANF2M-DoqhjjxHOIyIo2R8jFFGAEUYdA-ihGBJEXosJTDIkeOiX4lRXiUAYGBAE4IQTREhP0QwlAbjTHmOieooMXCsB+M0YkwpySSlhNvhUqJljsBcKDLk-JTSjBFJSZI7IHSMnsL8bfLhwIrEFMGS0-BYTuFjKqV06x0i5lDNaSMtR6TVlGD4VgLhKjEn2OCfg2kUBGF7PYVkdRUyeGHM2QsmhlyMjSJuTwvxRyeGYH6dol54i3lGM+dw3JPysjcIwGgZ5DiLmUAyK40FfjYlZFBCcgFcLXkIoiSY1h7DlkYBQFw9pGAMVnOKfCq5aS8VmNuZgWpcTGKwvOdiq55TPm3xDIyphRKWWUrZRkdpnLJlcLQOi-lei3lZBWew9pdT1FHIGVsqlGRlmfJQCGbJri+XKsBRkN5uzaVsKZdMqFxLTlJKxeI-YDhZjXONfU7ARgPmqNyQIvV1qMi2qcI8D5jrMBYBdTI1RErPWsptVRe1ILHUhmBI8jADzfF5MlSUn19qkWOtnLfBNjKuXQtTfg9NjxcXuPMTmsFXCUD-IpXo4t1y9kKKJTw2JTE-E1qtRG71UbHgcuNUY-hNiMCMrQFkYdhaaH1uFca4EfCmJGCyGOn5iiC3hoFZGu1jwZV7JmQcqF+SjBOqmWuutPa1UrJmc62+mBiVGCDHw8lnb13ds3WqphM6alxP3WagJtaSmCDcuI99ZbR3BtsTwvpE7xEAa3O8lZoGwX8OOWOx9zSvUwfETGkDWQIN8oObk49mKu0YcRfBqxuGHnxI9UR59JHS2VLQN83DMKYngqgxkEjNKy1YD4RWuNXDeW1JPf+sAgGMh9u43G35eHGOJvYyR6dZbelDtiTxlNwn8Eke3f2kMOasghlU6CGFGmaEkfVf20EObb4Pp6e6+TonYNGqUyGbhBy-nTII7+p9eiGTEAstsB1ZamKYHndwyzqjFXsd8+ZKQAX-VBe8RR5DUW-OxcMSspiWqeFLpJbkxpNGfOpYC5moLs40AJuySgFFKWYsBfo6wtAfDXNqLJQJ9tNX-MNuNWgdR5XuF+JY41pDJnxHRc6xJhjs4UC4YPSu4zBWSljbS4pypWB1GhfC4elzHW0vae4+ihdB6gwoZ2wF8zSmx3lfzbE5icmRsZCW2d4Dq321fumQ0rzaGu0UiEIFypt8l08MZS1jtX3n0-b9Ss2+5qF3fth+O+7EP0t7JlRohdY7YnQ91Qt-BSOSuVP0wukLVa+Gg-mV6pH9WzH6cTQc7J19hs45oUjrjBPJkLtnLEtAgb2NI4m6wrIyiF01LqcTxHTVHgrYF+RgHBa71PPF79vbBPwVvbvbp3nEvz0o74dN6t4673MsV48JzKvB3lLw8CD7lqwfDP+rwP7rCrcY-w0hpL93kYO-i5U4EK7puC4N9wgz7HPfI5neKun-jhfqaZ6E1SDv8dO-FbT2+uTb233ax7+P4SL3J9cygKFPLUPk67aH1nSepOktvT17pWf7fidz5X3JjKcC19jxI+vUuzG+5DFdiVd7C8h+z8rivZK4kMp6e5uvHhtfh6yXE0EjKB1Cfb6H03SfA1Mrky6lfKFvMlPzuuWA1Kd1MQO2iiLCT2+H5+Fc73SeoVBtRyx5Z7Gb-H7D2WmZvf8PHLK2-oQI-K5RPbvJiZvA5UEW9FAPLAArcW-HPU-MdeNeJFjM-bHP9fBd-E-HdC3eNAPA9LAKFebDAmhLAhvHAozL5N3HVYg-fTAwA+ArvB6YETVNHfrN3JtJVa-Bgj-EfbvKrPJdHFNF1KFYvFVUgngq5c7H3eJIMaPB5FgxnEg8RMg9ffgzfLIOdVRVdMhOgmhCgH4R3fg8A1PN3RDQjZQjIAw34e-fgvhOQu5N3SFBHdvawz-GQy7BdLJElMdXfPQ8RNwkA5gqvV3axeJLgywtwqnYIgzOJW9XlWg23EpNw8vbvDPaFDnOXRRdjNw-nNIzAPTD7Q9SAnI-wX4Jg2dRVA5PhFjXpGPSIso0ZHdUw5AognpMNVwxo6Qp3W+cjC3bJYEfLBowwtQ4I91GJMdW9YEIzT7EvZ9EgBkBwIw5g5NOQ11XDCI-w0RRYr3C9Rw+NFraxQlRIuYvRBYpYrDH3LIcA9g1FDoyw84hPPYvjOXAvdjR4hAmdTQtHRwh5NtNvB4nYrrL-RdWnbhYnLxDXe7D4vI5gsLZteEljVvajQEpYiooPH4kMH5LAMncQ8RD4vguEzAcrAvPDe9eorYj47o7vRDEkvxW9IMUVaEoE0YwY3JHDatDzCkywggSkBhZ7eRMEcrdY3hCkpI-BXkqRFZIxPrbwqgiwrYyU9wwUqbaTFja4sU04kpJUoIwYogltN3dIoYxUvkz4r-bhTw9gnlc1djJU1IuEyYoQh5UdHQnk002EkFDIi0upNo+7JUpgoxUEINRDbE7lW000wkwMmxHpLQv0006k8xMEBw2cH5Rkq-N0hhUYoxLEg5OUxQlE0eLU-BAYImZYoMK3MfEUmA+7EsyHRtX3Z1cEvDDEhU8UmhWs5UjxCs4MmAhdBXdvDsoI8syzZjHw10rYjs6I8s17dgsImzGs2AUs+08s+wnhRfATUQ9jDsj08s4dLwg3f4zYts8RDsgMzg13ZdMQ-VDsyM27VzUlZ0o3Acxck3aUptEknnLbdMicl8t9RtOouQhnH5YES7WYvEjID4CMRwKQMsu8sDN1O7dvSCiAaCuDf88YkU63JC3gKCmCy4+RY7XDVFE7e7ZC1CocoMKFCtarQ7VrUinClCmCqcrAELeHTHLCywsimC5crAMdQot3aAxCzihi1Cj02TK7XrATSY9jLioVaU7nQdJiJrATKbGSkSmCyM2THNYLN3ZPE48C2ShMhRblLxGo0XAErYwygUjJFFLxeknpbbG3IsmhTYcKZYMspheChNC1dvVy-aNC-tNAvrIMy-As48jIPy9y-CjxXlULEXNcui3yuifyoczLQdJspNdRXE-VSKsgM0ypZiLKhKh5Uwo85y8RXK4EgqpiQHZw2JQSsq8Cyqj01gvA75ATecpKtyvKgMgQq7cDBI9jSqyMvqr9bpSElwywyqoygQ+dFAMyw9bxIa5K9yrMlAIq-XG7GYpy8CkoFKEoBAMs9pLy70+7Pa2IA6us-tFAPik69bdjc6y6zs8xG65tEU+4rYx6w6oc0kuQ0U9UrKh6-aw6qc46lrPNSLM64Gx4Zch8tcqtQGqGi6w6j02+UEedNFcahnY08Kr6yXaU-NeNNG7fIbbKr1PGpo-tfNfPewn08c3G6G2fJTdIvXdRW9LAPwhm5Gk3ay8tabJiKFWJfMsC-VFgKoaIGifgMs5w+NEUzqywsWiW7SAKi7HNEU+6+7RWuRZW6K8xUE4M9RbJQlHyhW8W7WqWoc+Eg49rBdRy9vLWyW-K+RIPBKlja7djB25W5cjEhw9zLfE2rYz2qWj09gkkwWsVEi+2s2x2gMjKg5XvOmq8r1IOympTFrfqg3Dm788KlOoy8wuJeyu9JOrtXO3myi0nVjVrF1MXXQ3GqkZYjmw5XM8a0UsmrtEoeu2wh6Dm+5aoqujKh6+u3Wnun4m9Y5Tcs6+uoIxujI74g9TG4u59Du3gSkJ2sxDmx0xwzHJ8yw5e1e+0+pMrWixlC3fS-VPe8gx1J1INYm1A1SyeleuSvZepIq6zGTTm8qjIC+wkl+sfa9OXNbCyuux+hM3+-PaxGgwekB3m+pcA9auXS9Y0ywmOIgBuhnNWkNBNRq-VFBq67jBnabEUgo9jXB56tbXTGbVRWxe7Uh6etK6bFrJND68K0h6ItbIM6TTHba9vUhg+tAKi+HE+nerY0h2Eli9kvukdCenhhmfG5+mvJ-DXLxWcReqVWR1O1bcSvdbfFioSkR9R0B5PedXo6g--GhgxmB5PG+2cA9Wdbkz6-SQyQLWqB6cCu0sEM6xxlqFWlxtx00j5TxpqJxrDXx-VJUkFQJ5qFxNxUJr1HUmRSJpx0tWJrtJUiJRJ7xrjFJ59dxjx9vRqKJy+owbJvRJUjlDJhhRTEp7U004VCp1O6piUiMhJ-JrxzMmJuIVxsJ+Mlp3etpv8yCRpmhJU3ZHasJ8Wh4EUZxzp8CsvPJnkiZ+AKZ+LIZuPevAJ9vAgRZqZkJmZ-VUPCJzZ7ZggUjZhVZjvGfJFP045s0850PdJo5kgSZk5rJvZr1OZ+ZxUm5iTO57Pcpx555p+wZt50vbPOpgFpZk5vbX5+vbda5p5yFpmmFmfdVeFwFpzZFh3UZ2uz+7YOIT4JwaZhGcCzjT58KvF2IAlxwHxkF2jBzcRDZywilqlz-c5kjQ5pl-Fj4alkrNl+l05+7Zl7l252lvROjXprYoVwl154l-VUlsl3Frlwln50VkTMTf5zlyl4Vqp1VzTfl8FzVll6F3V0zfluF9vKV6l87PlsTVFi1pVq14DG1xzJhMZr1KATdIDM5k1oFBFV19vD131Bljp2Vr1N5RlrYwN2YTDENrpsNhFDlyNz1054F0NrtN5K5gN5N5Jn1g1HFCV8KqN2DGVuN9Nv1gtz+ot8RFVtN59N5DVpNoNoF4p3Nt5A1xt6Nhp1thFc1ywqtpF7tqQit8C-tjFwdv8t1rte0FMI-Il0t59VJBV8C6dyiQwlZ3NsJCN8Kld2d3Z2t4ZAxRN7d+AGdww3ljdkZTNywndwwnN-d7ZAxB569k91d34Et2ZkZNJe7G934Gt+dg9spYd-VH95t35gxdt490934Y1+9xZEZXtrYkD61i9gxO159qDgZlt2DpxHZf1vfSD19h+Y1MEN4WxN4V1b9l92dj5G5UjjhOjydwqfYW4IFNKKoE5ggAycyBiPJTQpiWkMAGjH8WIFjg1Njk5oQCMe8Hj5iAToT5j2DdcKTk5+wWIWYHj-jwKeTkTxT8TjIAADwwTiHU5dTk-w7mOE9E6U4gHY9EQgC1AQEgiYQ4W06s7047u454W4W85KH05xaKWxACDS0M848TgYhdV87vUi4KsySrrQEgyMG5DiX5UC7BgC1C88-YWBEi6DGi86UPTi4S6S+BA-oC5iDS4yEk5s7AHC9y-068Ty-GQK+yXi+EOK9K5EVS7S1U5M-YTq4XUa-2TlNa4PXa5S-K+C6M7U-gHC7QEi5YMG88WG6K53xFpegIHYkJawBC649gB45K808E4pQ2+IkJaDB27C6gmHUO5oxO8ympYu8y-4TM6fTu+FYy726u96Je7Bze8Jaq+k9M60+O82+pZ65m5dWu5+7mL+4e6m5M8sxu5B9O+pfO-h4h+5SR9e9B8RUM-B8giwGh4C5x7QDx+M4h5Cxe4pVXeolohkAM8oVi1IhkTBDAAIBoxp5olRAdwmiZ5iRkTZ456oi54vkq8oGq8gmYlZ-Z+p+F7p4dxYH4CjFIiYUF9l4cBF-p8M8V+V-57V8LKKXKlkEq5kCkEgiujSAAFlTeMgAAleARwZUOIN4DoaicKJXt4NwJeQDHoC+Iwa33gEkZgf3jwCyN4YkQPu7+AGjI3vKggDXyCDjEoJ6ggBkKMQKN4AGCkFey3-EK6NPigMANIEYT3kAG6aC+AIwZIcYNwN4W3qQH8NMEefIV2WAWoZYMWfgN4FoOqWAN4eP6iP4LcCAFgUvloZPhAIwDoCKIwAwYkM0CAWvowNwcv3EKv8YWf+fxf5gV8Ffh3tf6vowfP0TcKNwGPkYIfpEFgSCAAcXgH2EcG0lL60Al1YgADkdgjB6+DJPBg+iAr--OIiWPn8AgAAAvR4Gjw+48dNUWPMHMAJojgCGeUAr7rALmLwCwBI4Xbjxz45E8gBF-BAY8AB41cgeR3J9OgMQH49IesnYHmQPwEYCGelA9GrgJejkCIBZPabpLyh40C4BdAxAdt3R4E9mBvwVgeEnYEmdKeNAilMAM3AoV6AGCWQWQAJ4yJz+xvGQVgjyqB9YgXHSCBEhUF5U1BcgogJAB-DH4nOygqQRfwMF5UTBUASCMKkAEvR9oVUP4Dj1uDUQtwifaCFgG4FzEnBsGWHsNA8BEBPB4IGZD4KKR+DxEAQzQdoNWD7AuONGSIS4JR4YIKowQq7mCF6LhCRESQgIRZFkaxB9uTESQU+mz6PA-ACgwIe4MKEupEhHwcofAEqFuD0hRmOofaAyAVD1BGQGIT8FIhko2hDQyofkPSHcoBhHQxoV0OGEeC70RKBwcIPBgnMkQhLMRKm3-YlICmTjBtjwOzgGp3u-ESCAQHCjQBz+OwpYdS2eBXACevnE4bZzOGrDDeCw3YYS3fDwAZY2TcqKcOFYXDaAHsDSLSw+G3DhWYiNdACMWHCspALAFgAkFIjXDzORSWuBkBEHID3hvAx4I91gBroERIgogfcLwHG8CBfwXbpiOBiIjURAgrDvO2xHi97wjHD4HtTyqdDDBWAyHjgOyEvQ6RKYcYZUJxEzDUBRSDkQyImFyDKB7aagaQIpQCjCo+ISkCpCkBVAcK66XEV6hA5LsREkovoNKNlHyirkeiHEO3xqHZN1RmomONqPXRrojR4sLUQqL0SgilRvwC0TKJNHWiQk5op0JyI1GWinROokpPOFcipw7Rz6EDluzmLqiFO+JEJAGL0Qgcr2T6UMTp3DH4I9R0w85iByfaxi3R1gsMc+ltEUjdq-TL9jRjjGic9EvogYJQEjElJoxQHdkRmKY7xinglwWgDCL84SjaxtIaoPZwRS-xTgkENwAACoz+rY+kXmw7FvJuxxvCEVCOWCJ86uhYtsZUBqBjjIEeVFYbmLVG1j7AbkCNLSNrGWddOynQkZd2yZ7jWOB4oga6OHEnixOZ46kcQOPFZjrOtnc8XOMvEPi9OlA+8fWMfESdbxO44ccAMV6QBYAEENcSwPwEa8LxnI6QUKMUGgT5hqgmCd0PiE-BIJeVJEcyJRH4j6BH3VCaSKwmICeRmEuPvQOfFDioJZIj8f8Ionk9cJuQ0HgGLokpCehGIuYRBVrGriUxVHQwhBxDHsSSkSYg0bmxA48T+RfE-BDmM4kYcRJ644cSWMjB+jyxcEwMVxN+Bod0xw4sWPTw4lCSVJDaXCZpIdy6ipA+oisfghA5bDeJGk44NmIWGmSaE5k6sfaNrEHUpwOIY-LBm0nYdxEIHAsWRLyouSHgbk4sT6PklljbBSkqMbpIsmiThxAQ5EbSzilEiXxnIgIYRISk49SJ6klKTj0om1s8hNE1iZKNBFPDqWq4n3BaWbSglnSoFRLso35RFTHhZw71JCOhFQRCptYtgOZARQejHRco50RFDsneTdJwYmKVBPYCpwpRnovqd6MTHGTkxOkjDiNJkljSupVyHqVaJmk0IJJC0wjktJrH-jxp3U40dNOfSlj-REUyscNMclsSDpq0xURdLMm6SEOYOIqYdM2niIBJg07oU9OumvS7pNo2yQ9Psm6TpJ+0laRNLknx8wpX0kDghz8lGctxeE4iYgPim1t0JicWia5GIBIyQBBE28QGKpFScwAmMxGSINymUjqJ03EmdjNXEfA-ASIMgO1OHF+BYAZQCgPpzQlkjUZFM-CWiMPHmRcJLMtmfAA5k4yCRaUtGVzKSnwyhZVhEWZzN5nkiiJuMwgb+OSmCjWZcs0WZ5LWGPSMOvkg3iIjTCOBHAh1AkcgJUbfc2RvwY2abJHAkT8ZkPA7kIKsJSATZZs+gYwOwBWzxRT6OabEHsAMJ1pXo+6TFwmSFc2uh6TYhSm6D2gZIx000TrOXa6TVRL0WOdjKvFJzgOuko9nMXTkyQsx3w5saxLTDhRegZQK8d+IDGVy9OmUsHKXNgDlzJpvUxORGKBlDSMOz0uYg3KblZzlRKctdD3ORA4zAJ7AECcrIH4EBB5FURucPOgkKCCZlgxCcxOnlly55qIxeYrJwkc8Z5TcsoVyPUEMT6hB8uQc0NeE7y15ZQboDAG5YBiAhkAokUpICHojV5s8soHEBjjpcMBkEFALCMNkvRQBbE24IZ0Nh2DzBT6QBZBRFnDRtIFkRwJBG3Q0ZIFOFaBWuBAhpdeAkEdVEgqAXQK0wSvWCbshwVQLDOQ8koMz3AU8QrAKCX4IiHCi-ALI2sPCMEGvkRhCWSIQ+U-ILD0LUh4sFWTLCUBNQ9gBwHSFPH9ksB-MJiaAG4KMCCKlwIi2QJxCoWmhUEUgAhd6GlE4JPwewTXpgqMBsB9OlAKeGmHIVtS1QHwBIGxP3keBwpYIKeMguAUBiHFeCtRVGAGRFyi60PAyIZw8Wuop43ik+bBL8VqhxFkimKCmCkBKK98NC12eoqjCaKXogIA4FouCDNRH+ei7JqlLVlWBlFMS-BVGA0XaxElTsRQUgG6DOwNRRAGWMwu-BSAQuE3bYHfIaXo9EkPEU+BzG56cARAjWIME-BfhjxEIQAA)


```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="shoelace demo">
    <link rel="stylesheet" href="./shoelace.css">
    <script type="module"
        src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/components/button/button.js"></script>
    <script type="module"
        src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0/dist/components/drawer/drawer.js"></script>
    <title>Document</title>
    <style>
        body {
            opacity: 0.01;
        }

        body.ready {
            opacity: 1;
            transition: 0.25s opacity;
        }
    </style>
</head>

<body>
    <sl-button class="greet"  variant="primary">HEllo</sl-button>
    <sl-drawer label="Drawer">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <sl-button slot="footer" variant="primary">
            Close
        </sl-button>
    </sl-drawer>

    <sl-button class="opener">Open</sl-button>
    <script>
        let drawer = document.querySelector("sl-drawer")
        let greetButton = document.querySelector(".greet")
        let openButton = document.querySelector(".opener")
        let closeButton = drawer.querySelector("sl-button")
        openButton.onclick =  () => drawer.show();
        closeButton.onclick = () => drawer.hide();
        greetButton.onclick = () => alert("Hey")
    </script>
    <script type="module">
        await Promise.allSettled([
            customElements.whenDefined('sl-button'),
            customElements.whenDefined('sl-drawer'),

        ]);
        document.body.classList.add('ready');
    </script>
</body>

</html>
```