{"id":37513,"date":"2019-07-25T23:34:28","date_gmt":"2019-07-25T15:34:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=37513"},"modified":"2023-04-06T21:57:38","modified_gmt":"2023-04-06T13:57:38","slug":"html-template-slow-tag-shadow-dom","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/","title":{"rendered":"How to Use HTML <template> & <slot> With Shadow DOM"},"content":{"rendered":"

HTML Slot<\/a><\/strong> is one of the most remarkable standards made by W3C. Combine that with another impressive W3C standard called templates<\/a><\/strong>, and you have a fabulous concoction to work with. Being able to create and add HTML elements<\/strong> to a page using JavaScript<\/strong> is a necessary and important task.<\/p>\n

It\u2019s useful when a code snippet has to appear only at certain times<\/strong>, or when you don\u2019t want to type out hundreds of similarly structured HTML elements but want to automize the process<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tMaster DOM Manipulation with 15 Essential JavaScript Methods<\/a>\n\t\t\t\t<\/p>\n

Creating HTML elements in JavaScript is not so desirable<\/strong>. It\u2019s a hassle having to check and recheck if you have covered all the tags, placed them in the right order, all in all, there is just too<\/em> much to type and keep track of. This turmoil, however, got a solution<\/strong> when the <template><\/code><\/a> tag appeared. If something needs to be added to the page dynamically<\/strong>, you can put it inside of the <template><\/code> element.<\/p>\n

In this post, I will show you how you can use the <slot><\/code> and <template><\/code> tags together with JavaScript to create a mini HTML table factory<\/strong> that can create and populate hundreds of similar tables.<\/p>\n

The <slot><\/code> and <template><\/code> tags<\/h2>\n

The <template><\/code><\/a> tag holds HTML code that won\u2019t be rendered by browsers<\/strong> until it\u2019s properly added to the document, using JavaScript. The <slot><\/code><\/a> tag is a placeholder you add to a Shadow DOM<\/strong> which can be made of the content of the <template><\/code> element.<\/p>\n

A Shadow DOM<\/a><\/strong> is similar to a regular DOM (the document model parsed from HTML). It creates a scoped tree<\/strong> (a Shadow DOM tree), that has a root of its own<\/strong> and can also have a style of its own<\/strong>.<\/p>\n

When you insert the Shadow DOM tree into an element in the main document \u2014 the element will then be called the shadow host<\/strong> \u2014, all the child elements of the shadow host that are marked with the slot<\/code> attribute<\/a> (not the same as the aforementioned <slot><\/code> tag) will take their place in the newly inserted subtree<\/strong>.<\/p>\n

\"Addition
html-template-slow-tag-shadow-dom: W3C<\/a><\/figcaption><\/figure>\n

The Shadow DOM, as of writing this article (July 2017), are supported only in WebKit- and Blink-based browsers<\/strong> but you can check the actual state of browser support on CanIUse<\/a> at any time.<\/p>\n

Setting up the HTML <template><\/code><\/h2>\n

Still confusing? Let\u2019s see some code, starting with the <template><\/code> element.<\/p>\n

Inside <template><\/code>, there\u2019s a <table><\/code> we\u2019ll use as a blueprint<\/strong> for creating some tables<\/a><\/strong> that\u2019ll be added to a document. There are <slot><\/code> elements inside the table cells (<th><\/code> and <td><\/code>) acting as placeholders<\/strong> for the column titles and cell values. Each slot has a unique name<\/code> attribute that identifies it<\/strong>.<\/p>\n

\r\n<template>\r\n  <table>\r\n    <tr>\r\n      <th><slot name='title-1'><\/slot><\/th>\r\n      <th><slot name='title-2'><\/slot><\/th>\r\n    <\/tr>\r\n    <tr>\r\n      <td><slot name='value-1.1'><\/slot><\/td>\r\n      <td><slot name='value-1.2'><\/slot><\/td>\r\n    <\/tr>\r\n    <tr>\r\n      <td><slot name='value-2.1'><\/slot><\/td>\r\n      <td><slot name='value-2.2'><\/slot><\/td>\r\n      <\/tr>\r\n  <\/table>\r\n  <style>\r\n    table {\r\n        table-layout: fixed;\r\n        border-collapse: collapse;\r\n        margin-bottom: 10px;\r\n    }\r\n    th {\r\n        width: 300px;\r\n    }\r\n    th,\r\n    td {\r\n        border: 1px solid;\r\n    }\r\n  <\/style>\r\n<\/template>\r\n<\/pre>\n
Inside the template<\/strong>, I\u2019ve also added some basic styles<\/strong> for the table, using the <style><\/code> tag.<\/p>\n
Outside the template<\/strong>, there are two <div><\/code> elements carrying the column titles and cell values inside <span><\/code><\/strong>, for two separate tables we want to add to the page.<\/p>\n
\r\n<div>\r\n  <span slot='title-1'>Title A<\/span>\r\n  <span slot='title-2'>Title B<\/span>\r\n  <span slot='value-1.1'>Value A.1<\/span>\r\n  <span slot='value-1.2'>Value A.2<\/span>\r\n  <span slot='value-2.1'>Value B.1<\/span>\r\n  <span slot='value-2.2'>Value B.2<\/span>\r\n<\/div>\r\n\r\n<div>\r\n  <span slot='title-1'>Title C<\/span>\r\n  <span slot='title-2'>Title D<\/span>\r\n  <span slot='value-1.1'>Value C.1<\/span>\r\n  <span slot='value-1.2'>Value C.2<\/span>\r\n  <span slot='value-2.1'>Value D.1<\/span>\r\n  <span slot='value-2.2'>Value D.2<\/span>\r\n<\/div>\r\n<\/pre>\n
Each <span><\/code> element has a slot<\/code> attribute of which value is equal to the name<\/code> value<\/strong> of their corresponding <slot><\/code> tag inside <template><\/code>.<\/p>\n
Right now, all you can see on the page are the text strings contained in the spans, so we need to add some JavaScript as well.<\/p>\n
Attaching the Shadow DOM tree<\/h2>\n
Using Javascript, we insert the table from inside the template into both divs as a Shadow DOM tree<\/strong>. After the insertion, the spans get placed into their respective slots inside the table and display the desired column titles or cell values. The result will be two auto-generated tables<\/strong> that use the same template.<\/p>\n
First, we need to check if the Shadow DOM is supported in the user\u2019s browser. The attachShadow()<\/code><\/a><\/strong> method attaches a Shadow DOM tree to an element<\/strong> and returns the root node of that Shadow DOM tree. The if<\/code> condition in the code below checks if the browser supports this method by testing if the divs on the page have the attachShadow<\/code> method.<\/p>\n
\r\n\/\/ check if Shadow DOM is supported\r\nif ('attachShadow' in document.createElement('div')){\r\n\r\n}\r\nelse\r\n  console.warn('attachShadow not supported');\r\n<\/pre>\n
We create a custom variable called templateContent<\/code> that serves as a reference<\/strong> to the content of the template.<\/p>\n
\r\nif('attachShadow' in document.createElement('div')) {\r\n  let templateContent = document.querySelector('template').content;\r\n  let divs = document.querySelectorAll('div');\r\n\r\n  divs.forEach(function(div) {\r\n      \/\/ inside loop\r\n  });\r\n}\r\nelse\r\n  console.warn('attachShadow not supported');\r\n<\/pre>\n
Inside the forEach<\/code> loop, a Shadow DOM tree is attached to each div<\/strong> (div.attachShadow({  mode: 'open' })<\/code>).<\/p>\n
There are two mode<\/code> options<\/strong> for attachShadow<\/code>: open<\/code> and closed<\/code>. If closed<\/code> was chosen the root node of the Shadow DOM tree would become inaccessible<\/strong> to outside DOM elements and objects.<\/p>\n
Then, we add a copy of the template content<\/strong> to the Shadow DOM tree using the templateContent.cloneNode(true)<\/code><\/a> method.<\/p>\n
\r\nif('attachShadow' in document.createElement('div')) {\r\n  let templateContent = document.querySelector('template').content;\r\n  let divs = document.querySelectorAll('div');\r\n\r\n  divs.forEach(function(div){\r\n    div.attachShadow({  mode: 'open' }).appendChild(\r\n        templateContent.cloneNode(true))\r\n  });\r\n}\r\nelse\r\n  console.warn('attachShadow not supported');\r\n<\/pre>\n
And, our dynamic HTML tables are ready, here\u2019s how the output looks like in Chrome:<\/p>\n
\"Dynamic<\/figure>\n
\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Use the MutationObserver API for Tracking DOM Changes<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"
Speed up your HTML templates with the slow tag and Shadow DOM. Learn how to optimize your website for faster loading times.<\/p>\n","protected":false},"author":145,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[3392],"tags":[3554,506],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Use HTML <template> & <slot> With Shadow DOM - Hongkiat<\/title>\n<meta name=\"description\" content=\"Speed up your HTML templates with the slow tag and Shadow DOM. Learn how to optimize your website for faster loading times.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use HTML <template> & <slot> With Shadow DOM\" \/>\n<meta property=\"og:description\" content=\"Speed up your HTML templates with the slow tag and Shadow DOM. Learn how to optimize your website for faster loading times.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-25T15:34:28+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-06T13:57:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html-template-slow-tag-shadow-dom\/slot-diagram.jpg\" \/>\n<meta name=\"author\" content=\"Preethi Ranjit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Preethi Ranjit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/\"},\"author\":{\"name\":\"Preethi Ranjit\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\"},\"headline\":\"How to Use HTML <template> & <slot> With Shadow DOM\",\"datePublished\":\"2019-07-25T15:34:28+00:00\",\"dateModified\":\"2023-04-06T13:57:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/\"},\"wordCount\":743,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-template-slow-tag-shadow-dom\\\/slot-diagram.jpg\",\"keywords\":[\"DOM\",\"HTML\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/\",\"name\":\"How to Use HTML <template> & <slot> With Shadow DOM - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-template-slow-tag-shadow-dom\\\/slot-diagram.jpg\",\"datePublished\":\"2019-07-25T15:34:28+00:00\",\"dateModified\":\"2023-04-06T13:57:38+00:00\",\"description\":\"Speed up your HTML templates with the slow tag and Shadow DOM. Learn how to optimize your website for faster loading times.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-template-slow-tag-shadow-dom\\\/slot-diagram.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-template-slow-tag-shadow-dom\\\/slot-diagram.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-template-slow-tag-shadow-dom\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use HTML <template> & <slot> With Shadow DOM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e981676afae36d1ff5feb75094950ab3\",\"name\":\"Preethi Ranjit\",\"description\":\"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/preethi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use HTML <template> & <slot> With Shadow DOM - Hongkiat","description":"Speed up your HTML templates with the slow tag and Shadow DOM. Learn how to optimize your website for faster loading times.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/","og_locale":"en_US","og_type":"article","og_title":"How to Use HTML <template> & <slot> With Shadow DOM","og_description":"Speed up your HTML templates with the slow tag and Shadow DOM. Learn how to optimize your website for faster loading times.","og_url":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-25T15:34:28+00:00","article_modified_time":"2023-04-06T13:57:38+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html-template-slow-tag-shadow-dom\/slot-diagram.jpg","type":"","width":"","height":""}],"author":"Preethi Ranjit","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Preethi Ranjit","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/"},"author":{"name":"Preethi Ranjit","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3"},"headline":"How to Use HTML <template> & <slot> With Shadow DOM","datePublished":"2019-07-25T15:34:28+00:00","dateModified":"2023-04-06T13:57:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/"},"wordCount":743,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-template-slow-tag-shadow-dom\/slot-diagram.jpg","keywords":["DOM","HTML"],"articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/","url":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/","name":"How to Use HTML <template> & <slot> With Shadow DOM - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-template-slow-tag-shadow-dom\/slot-diagram.jpg","datePublished":"2019-07-25T15:34:28+00:00","dateModified":"2023-04-06T13:57:38+00:00","description":"Speed up your HTML templates with the slow tag and Shadow DOM. Learn how to optimize your website for faster loading times.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html-template-slow-tag-shadow-dom\/slot-diagram.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-template-slow-tag-shadow-dom\/slot-diagram.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html-template-slow-tag-shadow-dom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use HTML <template> & <slot> With Shadow DOM"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e981676afae36d1ff5feb75094950ab3","name":"Preethi Ranjit","description":"A .NET developer with a JavaScript background, Preethi is expert in front-end coding, JavaScript, HTML, and CSS.","url":"https:\/\/www.hongkiat.com\/blog\/author\/preethi\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9L3","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37513","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/145"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=37513"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37513\/revisions"}],"predecessor-version":[{"id":66301,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/37513\/revisions\/66301"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=37513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=37513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=37513"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=37513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}