\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Mar 22, 2019 <\/time>\n\n
\n \n An Introduction to Web Components <\/a>\n <\/h3>\n\n \n
\n custom elements<\/a> HTML templates<\/a> shadow dom<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Caleb Williams <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Mar 22, 2019 <\/time>\n\n \n \n Crafting Reusable HTML Templates <\/a>\n <\/h3>\n\n \n
\n HTML templates<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Caleb Williams <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Mar 22, 2019 <\/time>\n\n \n \n Advanced Tooling for Web Components <\/a>\n <\/h3>\n\n \n
\n angular<\/a> react<\/a> vue<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Caleb Williams <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Aug 26, 2020 <\/time>\n\n \n \n Creating a Custom Element from Scratch <\/a>\n <\/h3>\n\n \n
\n custom elements<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Caleb Williams <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jan 10, 2020 <\/time>\n\n \n \n Styling a Web Component <\/a>\n <\/h3>\n\n \n
\n custom properties<\/a> shadow dom<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Mar 22, 2019 <\/time>\n\n \n \n Encapsulating Style and Structure with Shadow DOM <\/a>\n <\/h3>\n\n \n
\n shadow dom<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Caleb Williams <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jul 21, 2020 <\/time>\n\n \n \n What ya need there is a bit of templating <\/a>\n <\/h3>\n\n \n
\n templating<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Link\n <\/strong>\n\n on\n\n Dec 27, 2017 <\/time>\n\n \n \n ::part and ::theme, an ::explainer <\/a>\n <\/h3>\n\n \n \n
\n \n $\"\"$ <\/a>\n \n \n Robin Rendle <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jul 29, 2020 <\/time>\n\n \n \n A Bit on Web Component Libraries <\/a>\n <\/h3>\n\n \n
\n web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Article\n <\/strong>\n\n on\n\n Jul 25, 2017 <\/time>\n\n \n \n Playing with Shadow DOM <\/a>\n <\/h3>\n\n \n
\n shadow dom<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Link\n <\/strong>\n\n on\n\n Jun 9, 2017 <\/time>\n\n \n \n An intro to web components with otters <\/a>\n <\/h3>\n\n \n
\n react<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n
\n\n \n \n \n Link\n <\/strong>\n\n on\n\n Sep 7, 2018 <\/time>\n\n \n \n Shadow DOM in Ionic <\/a>\n <\/h3>\n\n \n
\n ionic<\/a> shadow dom<\/a> web components<\/a> <\/div>\n \n
\n \n <\/a>\n \n \n Chris Coyier <\/a>\n <\/div>\n\n<\/article>\n <\/div>\n \n\n\n\n
A bit of backstory on why this page exists…<\/p>\n\n\n\n
I made a fancy new Gutenberg block to insert posts into other posts<\/em>, so this page is an example of using that (heavily) make a meta<\/em> blog post about other blog posts. For the most part, topical pages like this are best served by tag<\/strong> pages. For example, our tag page for Web Components<\/a> has more posts and is sortable in ways this is not. This is just a way to make a curated and hand-sorted grouping of posts, which is something we’ve done for a while with “Guide Collections”. But, we’re spinning down Guide Collections and redirecting them to tag pages and pages like this because they are easier to maintain.<\/p>\n","protected":false},"excerpt":{"rendered":"
A grouping of hand-selected posts from our site about Web Components. We’ve published a very useful article series from Caleb Williams, so that’s here, but also sprinkled in some other informational and link posts on the subject. <\/p>\n","protected":false},"author":3,"featured_media":323796,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_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,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[18847],"tags":[803],"class_list":["post-323764","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-guides","tag-web-components"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/web-component-thumb.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":353386,"url":"https:\/\/css-tricks.com\/developer-decisions-for-building-flexible-components\/","url_meta":{"origin":323764,"position":0},"title":"Developer Decisions For Building Flexible Components","author":"Chris Coyier","date":"October 7, 2021","format":false,"excerpt":"Blog posts that get into the whole \"how to think like a front-end developer\" vibe are my favorite. Michelle Barker nails that in this post, and does it without sharing a line of code! We simply can no longer design and develop only for \u201coptimal\u201d content or browsing conditions. Instead,\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/2-flexible-components-css.webp?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/2-flexible-components-css.webp?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/2-flexible-components-css.webp?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/2-flexible-components-css.webp?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/2-flexible-components-css.webp?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":307746,"url":"https:\/\/css-tricks.com\/how-to-make-taxonomy-pages-with-gatsby-and-sanity-io\/","url_meta":{"origin":323764,"position":1},"title":"How to Make Taxonomy Pages With Gatsby and Sanity.io","author":"Knut Melv\u00e6r","date":"May 21, 2020","format":false,"excerpt":"Learn how to make category pages with Gatsby and structured content from Sanity.io.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/nodes-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/nodes-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/nodes-pattern.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/nodes-pattern.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/nodes-pattern.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":342182,"url":"https:\/\/css-tricks.com\/building-a-headless-cms-with-fauna-and-vercel-functions\/","url_meta":{"origin":323764,"position":2},"title":"Building a Headless CMS with Fauna and Vercel Functions","author":"Ikeh Akinyemi","date":"June 10, 2021","format":false,"excerpt":"In this tutorial, we will learn and use headless CMS, Fauna, and Vercel functions to build a blogging platform, Blogify After that, you can easily build any web application using a headless CMS, Fauna and Vercel functions.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/fauna-vercel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/fauna-vercel.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/fauna-vercel.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/fauna-vercel.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/fauna-vercel.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":326207,"url":"https:\/\/css-tricks.com\/deploying-a-serverless-jamstack-site-with-redwoodjs-fauna-and-vercel\/","url_meta":{"origin":323764,"position":3},"title":"Deploying a Serverless Jamstack Site with RedwoodJS, Fauna, and Vercel","author":"Anthony Campolo","date":"December 22, 2020","format":false,"excerpt":"This article is for anyone interested in the emerging ecosystem of tools and technologies related to Jamstack and serverless. We\u2019re going to use Fauna\u2019s GraphQL API as a serverless back-end for a Jamstack front-end built with the Redwood framework and deployed with a one-click deploy on Vercel. In other words,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/redwood-fauna-vercel.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/redwood-fauna-vercel.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/redwood-fauna-vercel.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/redwood-fauna-vercel.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/redwood-fauna-vercel.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":293035,"url":"https:\/\/css-tricks.com\/weekly-platform-news-css-marker-pseudo-element-pre-rendering-web-components-adding-webmention-to-your-site\/","url_meta":{"origin":323764,"position":4},"title":"Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your site","author":"\u0160ime Vidas","date":"July 18, 2019","format":false,"excerpt":"In this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/web-platform-news-190718.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/web-platform-news-190718.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/web-platform-news-190718.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/web-platform-news-190718.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/07\/web-platform-news-190718.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":155634,"url":"https:\/\/css-tricks.com\/modular-future-web-components\/","url_meta":{"origin":323764,"position":5},"title":"A Guide to Web Components","author":"Rob Dodson","date":"November 11, 2013","format":false,"excerpt":"The following is a guest post by Rob Dodson (@rob_dodson). Rob and I were going back and forth in CodePen support getting Polymer (a web components polyfill, kinda) working on a demo of his. We did get it working, and things kind of evolved into this article. Take it away\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323764","targetHints":{"allow":["GET"]}}],"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=323764"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323764\/revisions"}],"predecessor-version":[{"id":323795,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323764\/revisions\/323795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/323796"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=323764"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=323764"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=323764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}