{"id":302288,"date":"2020-02-18T08:27:35","date_gmt":"2020-02-18T15:27:35","guid":{"rendered":"https:\/\/css-tricks.com\/?p=302288"},"modified":"2020-02-18T08:27:36","modified_gmt":"2020-02-18T15:27:36","slug":"web-component-for-a-code-block","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/web-component-for-a-code-block\/","title":{"rendered":"Web Component for a Code Block"},"content":{"rendered":"\n<p>We&#8217;ll get to that, but first, a long-winded introduction.<\/p>\n\n\n\n<p>I&#8217;m still not in a confident place knowing<em> a good time<\/em> to use native web components. The templating isn&#8217;t particularly robust, so that doesn&#8217;t draw me in. There is no state management, and I like having standard ways of handling that. If I&#8217;m using another library for components anyway, seems like I would just stick with that. So, at the moment, my checklist is something like:<\/p>\n\n\n\n<ul><li>Not using any other JavaScript framework that has components<\/li><li>Templating needs aren&#8217;t particularly complex<\/li><li>Don&#8217;t need particularly performant re-rendering<\/li><li>Don&#8217;t need state management<\/li><\/ul>\n\n\n\n<p>I&#8217;m sure there is tooling that helps with these things and more (the <a href=\"https:\/\/devmode.fm\/episodes\/framework-agnostic-web-components-with-stencil\" rel=\"noopener\">devMode episode<\/a> with some folks from <a href=\"https:\/\/stenciljs.com\/\" rel=\"noopener\">Stencil<\/a> was good), but if I&#8217;m going to get into tooling-land, I&#8217;d be extra tempted to go with a framework, and probably not framework <em>plus another thing with a lot of overlap.<\/em><\/p>\n\n\n\n<p>The reasons I <em>am<\/em> tempted to go with native web components are:<\/p>\n\n\n\n<ul><li>They are native. No downloads of frameworks.<\/li><li>The Shadow DOM is a true encapsulation in a way a framework can&#8217;t really do.<\/li><li>I get to build my own HTML element that I use in HTML, with my own API design.<\/li><\/ul>\n\n\n\n<p>It sorta seems like the sweet spot for native web components is design system components. You build out your own little API for the components in your system, and people can use them in a way that is a lot safer than <em>just copy and paste this chunk of HTML<\/em>. And I suppose if consumers of the system wanted to <abbr title=\"Bring Your Own\">BYO<\/abbr> framework, they could. <\/p>\n\n\n\n<p>So you can use like <code>&lt;our-tabs active-tab=\"3\"&gt;<\/code> rather than <code>&lt;div class=\"tabs\"&gt; ... &lt;a href=\"#3\" class=\"tab-is-active\"&gt;<\/code>. Refactoring the components certainly gets a lot easier as changes percolate everywhere.<\/p>\n\n\n\n<p>I&#8217;ve used them here on CSS-Tricks for our <code>&lt;circle-text&gt;<\/code> component. It takes the radius as a parameter and the content via, uh, content, and outputs an <code>&lt;svg&gt;<\/code> that does the trick. It gave us a nice API for authoring that abstracted away the complexity. <\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"so\">So! <\/h3>\n\n\n<p>It occurred to me a &#8220;code block&#8221; might be a nice use-case for a web component.<\/p>\n\n\n\n<ul><li>The API would be nice for it, as you could have attributes control useful things, and the code itself as the content (which is a great fallback). <\/li><li>It doesn&#8217;t really need state.<\/li><li>Syntax highlighting is a big gnarly block of CSS, so it would be kinda cool to isolate that away in the Shadow DOM. <\/li><li>It could have useful functionality like a &#8220;click to copy&#8221; button that people might enjoy having. <\/li><\/ul>\n\n\n\n<p>Altogether, it might feel like a <em>yeah, I could use this<\/em> kinda component. <\/p>\n\n\n\n<p><strong>This probably isn&#8217;t really production ready<\/strong> (for one thing, it&#8217;s not on npm or anything yet), but here&#8217;s where I am so far:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_povpLOp\" src=\"\/\/codepen.io\/anon\/embed\/povpLOp?height=500&amp;theme-id=1&amp;slug-hash=povpLOp&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed povpLOp\" title=\"CodePen Embed povpLOp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s a thought dump!<\/p>\n\n\n\n<ul><li>What do you do when a component depends on a third-party lib? The syntax highlighting here is done with <a href=\"https:\/\/prismjs.com\/\" rel=\"noopener\">Prism.js<\/a>. To make it more isolated, I suppose you could copy and paste the whole lib in there somewhere, but that seems silly. Maybe you just document it? <\/li><li>Styling web components <a href=\"https:\/\/css-tricks.com\/thinking-through-styling-options-for-web-components\/\">doesn&#8217;t feel like it has a great story yet<\/a>, despite the fact that Shadow DOM is cool and useful. <\/li><li>Yanking in pre-formatted text to use in a template is super weird. I&#8217;m sure it&#8217;s possible to do without needing a <code>&lt;pre&gt;<\/code> tag inside the custom element, but it&#8217;s clearly much easier if you grab the content from the <code>&lt;pre&gt;<\/code>. Makes the API here just a smidge less friendly (because I&#8217;d prefer to use the <code>&lt;code-block&gt;<\/code> alone).<\/li><li>I wonder what a good practice is for passing along attributes that another library needs. Like is <code>data-lang=\"CSS\"<\/code> OK to use (feels nicer), and then convert it to <code>class=\"language-css\"<\/code> in the template because that&#8217;s what Prism wants? Or is it better practice to just pass along attributes as they are? (I went with the latter.)<\/li><li>People complain that there aren&#8217;t really &#8220;lifecycle methods&#8221; in native web components, but at least you have one: when the thing renders: <code>connectedCallback<\/code>. So, I suppose you should do all the manipulation of HTML and such before you do that final <code>shadowRoot.appendChild(node);<\/code>. I&#8217;m not doing that here, and instead am running Prism over the whole <code>shadowRoot<\/code> after it&#8217;s been appended. Just seemed to work that way. I imagine it&#8217;s probably better, and possible, to do it ahead of time rather than allow all the repainting caused by injecting spans and such.<\/li><li>The whole point of this is a nice API. Seems to me thing would be nicer if it was possible to drop un-escaped HTML in there to highlight and it could escape it for you. But that makes the fallback actually render that HTML which could be bad (or even theoretically insecure). What&#8217;s a good story for that? Maybe put the HTML in HTML comments and test if <code>&lt;!--<\/code> is the start of the content and handle that as a special situation?<\/li><\/ul>\n\n\n\n<p>Anyway, if you wanna fork it or do anything fancier with it, lemme know. Maybe we can eventually put it on npm or whatever. We&#8217;ll have to see how useful people think it could be.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ll get to that, but first, a long-winded introduction. I&#8217;m still not in a confident place knowing a good time to use native web components. The templating isn&#8217;t particularly robust, so that doesn&#8217;t draw me in. There is no state management, and I like having standard ways of handling that. If I&#8217;m using another library [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":302481,"comment_status":"open","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":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/code-block-screenshot.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":336783,"url":"https:\/\/css-tricks.com\/takes-on-state\/","url_meta":{"origin":302288,"position":0},"title":"Takes on State","date":"March 24, 2021","format":false,"excerpt":"React is actually a bit of an outlier with state management. While it has first-class tools like useState and Context, you're more own your own for reactive global state. Here's David Ceddia with \"React State Management Libraries and How to Choose\" which does a good job of talking about the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/state-management.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":292329,"url":"https:\/\/css-tricks.com\/haunted-hooks-for-web-components\/","url_meta":{"origin":302288,"position":1},"title":"Haunted: Hooks for Web Components","date":"July 3, 2019","format":false,"excerpt":"I was just chatting with Dave and he told me about Haunted. It's hooks, but for native web components! Pretty cool. I think the existence of stuff like this makes using web components more and more palatable \u2014 particularly in that totally-native no-build-step-needed-at-all kinda way. I get that there are\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/lots-of-bubbles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339563,"url":"https:\/\/css-tricks.com\/astro\/","url_meta":{"origin":302288,"position":2},"title":"Astro","date":"May 5, 2021","format":false,"excerpt":"You can't even look at code or documentation for Astro (publicly) yet\u2009\u2014\u2009it's an in-progress idea\u2009\u2014\u2009but you can watch a video of Fred showing it off to Feross. I gotta admit: it looks awesome. I'm bullish on two major parts of this: Jamstack is a good idea. Producing static, pre-rendered, minimal\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/astro-homepage.png?fit=1200%2C597&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266130,"url":"https:\/\/css-tricks.com\/designer-oriented-styles\/","url_meta":{"origin":302288,"position":3},"title":"Designer-Oriented Styles","date":"January 31, 2018","format":false,"excerpt":"James Kyle: Components are a designer\u2019s bread and butter. Designers have been building design systems with some model of \u201ccomponent\u201d for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, \u201ccomponents\u201d (in some form or another) have asserted themselves as a best practice for\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":300598,"url":"https:\/\/css-tricks.com\/third-party-components-at-their-best\/","url_meta":{"origin":302288,"position":4},"title":"Third-Party Components at Their Best","date":"January 16, 2020","format":false,"excerpt":"I'm a fan of the componentization of the web. I think it's a very nice way to build a website at just about any scale (except, perhaps, the absolute most basic). There are no shortage of opinions about what makes a good component, but say we scope that to third-party\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/bright-plaid.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333234,"url":"https:\/\/css-tricks.com\/styling-web-components\/","url_meta":{"origin":302288,"position":5},"title":"Styling Web Components","date":"January 29, 2021","format":false,"excerpt":"Nolan Lawson has a little emoji-picker-element that is awfully handy and incredibly easy to use. But considering you'd probably be using it within your own app, it should be style-able so it can incorporated nicely anywhere. How to allow that styling isn't exactly obvious: What wasn\u2019t obvious to me, though,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/web-blocks.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/code-block-screenshot.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302288"}],"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=302288"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302288\/revisions"}],"predecessor-version":[{"id":303972,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302288\/revisions\/303972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/302481"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=302288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=302288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=302288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}