{"id":185,"date":"2024-02-10T14:55:08","date_gmt":"2024-02-10T14:55:08","guid":{"rendered":"http:\/\/e-muse.it\/blog\/?p=185"},"modified":"2024-02-10T14:55:09","modified_gmt":"2024-02-10T14:55:09","slug":"til-a-dive-into-web-components","status":"publish","type":"post","link":"https:\/\/e-muse.it\/blog\/2024\/02\/10\/til-a-dive-into-web-components\/","title":{"rendered":"TIL: a dive into web components"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Here at E-MUSE we favour sticking to HTML until we absolutely need CSS, and sticking sto CSS until we absolutely need JS, and sticking to client-side framework-less JS until we absolutely need to. Related to this, here is a tiny TIL: <a href=\"https:\/\/heydonworks.com\/article\/offloading-javascript-with-custom-properties\/\">Offloading Javascript with Custom Properties<\/a>, on the interaction between JavaScript and custom CSS properties.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Web components allow for the richness of JS frameworks, while maintaining the clean semantics of HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start from the MDN explainer: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components\/Using_custom_elements\">https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Web_components\/Using_custom_elements<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">And here are a few recent blog posts and resources on web components:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/drab.robino.dev\/\">Drab<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/jakelazaroff.com\/words\/the-web-component-success-story\/\">Jake Lazaroff on Web Components as a framework compatibility mechanism<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/scottjehl.com\/\/posts\/composition\/\">HTML Web Components on the Server Are Great<\/a> by Scott Jehl is also a great explainer of the concept itself<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Here at E-MUSE we favour sticking to HTML until we absolutely need CSS, and sticking sto CSS until we absolutely need JS, and sticking to client-side framework-less JS until we absolutely need to. Related to this, here is a tiny TIL: Offloading Javascript with Custom Properties, on the interaction between JavaScript and custom CSS properties. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[32],"tags":[33,30],"class_list":["post-185","post","type-post","status-publish","format-standard","hentry","category-webdev","tag-til","tag-web"],"_links":{"self":[{"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/posts\/185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/comments?post=185"}],"version-history":[{"count":1,"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions"}],"predecessor-version":[{"id":186,"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/posts\/185\/revisions\/186"}],"wp:attachment":[{"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/media?parent=185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/categories?post=185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-muse.it\/blog\/wp-json\/wp\/v2\/tags?post=185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}