{"id":323804,"date":"2020-10-19T15:21:33","date_gmt":"2020-10-19T22:21:33","guid":{"rendered":"https:\/\/css-tricks.com\/?p=323804"},"modified":"2020-10-19T15:21:35","modified_gmt":"2020-10-19T22:21:35","slug":"the-failed-promise-of-web-components","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/the-failed-promise-of-web-components\/","title":{"rendered":"The failed promise of Web Components"},"content":{"rendered":"\n

Lea has some words<\/a>:<\/p>\n\n\n\n

Perusing the components on\u00a0webcomponents.org<\/a>\u00a0fills me with anxiety, and I\u2019m perfectly comfortable writing JS \u2014 I write JS for a living! What hope do those who can\u2019t write JS have? Using a custom element from the directory often needs to be preceded by a ritual of npm flugelhorn, import clownshoes, build quux, all completely unapologetically because \u201chere is my truckload of dependencies, yeah, what\u201d. Many steps are even omitted, likely because they are \u201cobvious\u201d.<\/p><\/blockquote>\n\n\n\n\n\n\n\n

When I wrote A Bit on Web Component Libraries<\/a>, I was told<\/a> the main thing I got wrong is that:<\/p>\n\n\n\n

The idea was to make primitives that libraries could build on top of so they could ship less code. It was always the intention that you would use a library with them.<\/p><\/blockquote>\n\n\n\n

It was many years ago that HTML imports died. It was Dave’s pet peeve about Web Components for a long time.<\/a> So I guess after that, it was a all-JavaScript-or-bust approach for Web Components. And I hate to say it, but it feels like it’s a lot closer to a bust than a boon. <\/p>\n\n\n\n

I’m still optimistic though. Web Components can do some very cool stuff that only Web Components can do.<\/em> The Shadow DOM being a big part of that. For example, I remember years ago Twitter experimented with making embedded Tweets into Web Components (instead of iframes) because it was way faster (in every way). That never manifested (🤷‍♂️), but it seemed like a damn fine idea to me. <\/p>\n\n\n\n

I think the styling story is a big deal. I bet I’d reach for them at least slightly more if styling them wasn’t so weird<\/a>. I saw Scott was asking about it<\/a> just today and 75% of people wish there was a way to just reach into that Shadow DOM and style it from regular CSS. I get why that needs to be protected (that’s a huge point of the Shadow DOM in the first place), but having to very explicitly reach in seems like enough protection to me. <\/p>\n","protected":false},"excerpt":{"rendered":"

Lea has some words: Perusing the components on\u00a0webcomponents.org\u00a0fills me with anxiety, and I\u2019m perfectly comfortable writing JS \u2014 I write JS for a living! What hope do those who can\u2019t write JS have? Using a custom element from the directory often needs to be preceded by a ritual of npm flugelhorn, import clownshoes, build quux, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[803],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323804"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=323804"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323804\/revisions"}],"predecessor-version":[{"id":323812,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323804\/revisions\/323812"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=323804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=323804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=323804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}