{"id":2763,"date":"2019-06-11T18:17:01","date_gmt":"2019-06-11T18:17:01","guid":{"rendered":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/"},"modified":"2021-12-01T21:13:26","modified_gmt":"2021-12-01T21:13:26","slug":"using-web-components-with-react-in-2019","status":"publish","type":"post","link":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/","title":{"rendered":"Using Web Components with React in 2019"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2763\" class=\"elementor elementor-2763\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5ad207d2 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"5ad207d2\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-11b43c62\" data-id=\"11b43c62\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d96c031 elementor-widget elementor-widget-text-editor\" data-id=\"d96c031\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>Web Components. As web developers, we\u2019ve been hearing about them for a long time. In theory, they sound amazing: a browser-native way of defining your own custom components. You can read more about Web Components in our articles\u00a0<a href=\"https:\/\/contentlab.com\/blogs\/wijmo-web-components-an-introduction-and-practical-usage\">Web Components &#8211; An Introduction and Practical Usage<\/a>\u00a0and\u00a0<a href=\"https:\/\/contentlab.com\/blogs\/web-components-introduction-creating-custom-html-elements-2018\">Web Components Introduction: Creating Custom HTML Elements in 2018<\/a>.<\/p><p>JavaScript web development frameworks like React, Angular, and Vue have become popular because they take a lot of the grunt work out of building complex web applications. Most frameworks also support the concept of components: pre-configured code objects that extend the framework and give you code-once, drop-in functionality. But each framework defines its own way to create components. You\u2019d have to build component versions of a custom feature for each framework you wanted to support. Or if you\u2019re trying to find a pre-made component to use in your React app, but there was only an Angular component, or a Vue component, you\u2019d have to roll your own React version of the component.<\/p><p>Web Components offer a universal solution to the problem of framework-specific components. With Web Components, creators of reusable component libraries can develop a single version of the component that can then be used easily no matter what front-end framework you\u2019re using.<\/p><h2>Do Web Components Make React Obsolete?<\/h2><p>In a word: no.<\/p><p>As great as Web Components are, defining custom components that you can embed in a web page is\u00a0<em>all<\/em>\u00a0they do. React&#8217;s main attraction is that it allows you to declaratively define a user interface that automatically stays up to date with state changes.<\/p><p>Web Components on their own don&#8217;t offer anything equivalent to what React offers. And that&#8217;s fine! It&#8217;s not a failing; offering a declarative, reactive UI construction kit isn&#8217;t part of the\u00a0<a href=\"https:\/\/www.webcomponents.org\/specs\" target=\"_blank\" rel=\"noopener noreferrer\">Web Components spec<\/a>, nor should it be.<\/p><p>Web Components and tools such as React, Angular, and Vue complement each other nicely. If you&#8217;re thinking of building web UI components that you&#8217;d like to share with others, consider creating them as Web Components. You can ship pure Web Components confident in the knowledge that developers will be able to use them regardless of what front-end framework they are using, or even if they&#8217;re using no front-end framework at all.<\/p><p>You&#8217;ll be able to reach a far wider audience with Web Components than targeting a single framework, and if your components become popular, there&#8217;s nothing stopping you from creating framework-specific wrappers for them.<\/p><p>To demonstrate the ease of development and flexibility provided by Web Components, we\u2019re going to walk through the creation of two different components. Then we\u2019re going to use these components in a real React app. You\u2019ll gain a deeper understanding of the Web Component specification to create your own, and also learn how to integrate existing Web Components into your React apps in the future. You\u2019ll also see some of the tradeoffs between creating Web Components that can be used across JavaScript frameworks and developing React-specific components.<\/p><h3>Prerequisites of using Web Components with React<\/h3><p>The rest of this article is going to assume you&#8217;re familiar with modern React \u2013 up to and including the use of hooks.<\/p><p>I\u2019m also going to assume you\u2019ve read about Web Components (see the\u00a0<a href=\"https:\/\/www.webcomponents.org\/specs\" target=\"_blank\" rel=\"noopener noreferrer\">Web Components spec<\/a>\u00a0to learn more), have a high-level understanding of them, and may have even used them.<\/p><p>Finally, you should be familiar with web browser APIs in general, and\u00a0<a href=\"https:\/\/dom.spec.whatwg.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">the DOM<\/a>\u00a0specifically. Although we won&#8217;t use DOM in great depth, a general understanding of DOM is will ensure you understand what&#8217;s going on when we start discussing Shadow DOMs.<\/p><h3>A Whirlwind Tour of Web Components<\/h3><p>Let\u2019s get down to the nuts and bolts of how Web Components work. Since our aim in this article is to understand how to use Web Components in a modern React application, we\u2019ll just go over the high-level Web Components concepts necessary for this solution.<\/p><p>But if you&#8217;re looking for a more in-depth introduction, the\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\" target=\"_blank\" rel=\"noopener noreferrer\">MDN Web Components Guide<\/a>\u00a0is a fantastic resource for detailed Web Components information.<\/p><p>The Web Components spec has four parts:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_custom_elements\" target=\"_blank\" rel=\"noopener noreferrer\">Custom Elements<\/a>\u00a0\u2013 A set of JavaScript APIs that allow you to create your own HTML elements and define the way they behave.<\/li><li style=\"font-size: 16px;\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_shadow_DOM\" target=\"_blank\" rel=\"noopener noreferrer\">Shadow DOM<\/a>\u00a0\u2013 Essentially a private DOM that is scoped to your component, and your component only. This is handy for making reusable components because you can add CSS styling to your components without having to worry that your CSS class names will interfere with your component users&#8217; class names. Style changes made to the main DOM will be applied to the elements in your component&#8217;s Shadow DOM, however.<\/li><li style=\"font-size: 16px;\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/Using_templates_and_slots\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Templates<\/a>\u00a0\u2013 New HTML tags that allow you create templates for your components. While not essential, templates are helpful when building larger components without having to create your whole Shadow DOM manually.<\/li><li style=\"font-size: 16px;\"><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\/HTML_Imports\" target=\"_blank\" rel=\"noopener noreferrer\">HTML Imports<\/a>\u00a0\u2013 A browser API that allows you to import your HTML templates when a web page loads. The HTML Imports spec is still at the working draft stage, and browser support is inconsistent. Don&#8217;t count on it being available in 2019. If you&#8217;re reading this in 2020 or later, it&#8217;s worth your time to check on its current status.<br \/><br \/><\/li><\/ol><p>Of the four parts of the spec, Custom Elements and Shadow DOM are the most important. You can&#8217;t really create a functioning Web Component without using those two.<\/p><p>HTML Templates streamline the creation of Shadow DOM elements for large, complicated, or frequently used components, but they do require defining both the template and the code for your component. If your components aren\u2019t too large or complicated, it may be easier to just use ES2015 template strings to create your component\u2019s UI. That\u2019s exactly what we\u2019re going to do in the next section when we create our components.<\/p><p>As mentioned, the HTML Imports spec is in flux and doesn&#8217;t (yet) have much browser support. Chrome has marked its HTML Imports support as obsolete as of version 73, and Firefox doesn&#8217;t yet ship support at all (<a href=\"https:\/\/caniuse.com\/#search=import\" target=\"_blank\" rel=\"noopener noreferrer\">current support for HTML imports<\/a>).<\/p><h3>Creating Simple Web Components<\/h3><p>When using Web Components in the wild, you&#8217;ll come across two common scenarios: components that receive data via attributes, and components that expose an imperative API that you can use to manipulate the component&#8217;s internal state.<\/p><p>Components that are controlled via attributes will feel very familiar to React developers. Passing data in via attributes feels very much the same as creating React components via props. In most respects, it works very similarly \u2013 with a couple of caveats, which we&#8217;ll discuss when we use our shiny new Web Components in React.<\/p><p>Components that only expose an imperative API are going to feel a bit foreign to React developers. Instead of being able to use them the way you&#8217;d use other React components, you&#8217;re going to have to treat them like foreign interlopers and use React\u00a0<code>refs<\/code>\u00a0to interact with the custom element&#8217;s imperative API \u2013 which can include things like calling methods to alter the component&#8217;s internal state or attaching event handlers so your React app can be informed when the custom element fires events.<\/p><p>Since we&#8217;ll need to know how to handle both scenarios, we&#8217;re going to create two custom Web Components: one that takes data via attributes, and one that only exposes an imperative API. We&#8217;ll then walk through the steps needed to use both in our very own React app.<\/p><p>For a sneak preview of what we&#8217;re going to end up with, you can see the final result here:\u00a0<a href=\"https:\/\/react-webcomponents-2019.stackblitz.io\/\">https:\/\/react-webcomponents-2019.stackblitz.io\/<\/a>.<\/p><p>You can find all of the code we&#8217;re going to be using on StackBlitz at\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/react-webcomponents-2019\">https:\/\/stackblitz.com\/edit\/react-webcomponents-2019<\/a>. If you haven&#8217;t used StackBlitz, it&#8217;s a great web IDE powered by Visual Studio Code that also hosts and runs your front-end code for you \u2013 so you can make your edits in the browser and see your app update in real-time.<\/p><p>Our components are going to be very simple: they&#8217;ll be counters that display the current number their internal\u00a0<code>currentCount<\/code>\u00a0variable is set to. This might sound too simple, but as you&#8217;ll see, they&#8217;re\u00a0<em>just<\/em>\u00a0complex enough to give us a good feel for how both types of components work.<\/p><p>In the StackBlitz workspace linked above, you&#8217;ll notice two files in the\u00a0<code>web-components<\/code>\u00a0folder:\u00a0<code>ImperativeCounter.js<\/code>\u00a0and\u00a0<code>DeclarativeCounter.js<\/code>. These are our two custom Web Components. We&#8217;re going to take a look at the code in each of them to understand what&#8217;s going on.<\/p><p>We&#8217;ll start with\u00a0<code>ImperativeCounter<\/code>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9bad23b elementor-widget elementor-widget-code-highlight\" data-id=\"9bad23b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>class ImperativeCounter extends HTMLElement {\r\n  constructor() {\r\n    super(); \r\n    this.shadow = this.attachShadow({ mode: 'open'});\r\n    this.currentCount = 0;\r\n    this.update();\r\n  }\r\n\r\n  update() {\r\n    this.shadow.innerHTML = `<div><b>Count:<\/b> ${this.currentCount}<\/div>`; \r\n  }\r\n\r\n  increment(){\r\n    this.currentCount++;\r\n    this.update();\r\n  }\r\n\r\n  decrement() {\r\n    this.currentCount--;\r\n    this.update();\r\n  }\r\n}\r\n\r\nwindow.customElements.define('i-counter', ImperativeCounter);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee6d794 elementor-widget elementor-widget-text-editor\" data-id=\"ee6d794\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>What we see above is an HTML custom element. As described in the previous section, all custom elements must extend\u00a0<code>HTMLElement<\/code>, so that&#8217;s exactly what our class does.<\/p><p>In the constructor, we attach the Shadow DOM, define an instance variable named\u00a0<code>currentCount<\/code>, and call the class&#8217;\u00a0<code>update<\/code>\u00a0method.<\/p><p>If we look at what\u00a0<code>update<\/code>\u00a0does, we see that its task is simple: it updates the\u00a0<code>innerHTML<\/code>\u00a0of our element&#8217;s Shadow DOM based on the value of\u00a0<code>currentCount<\/code>.<\/p><p>Next, we have two methods:\u00a0<code>increment<\/code>\u00a0and\u00a0<code>decrement<\/code>. They are both very simple; they either increment or decrement the value of\u00a0<code>currentCount<\/code>, and then call\u00a0<code>update<\/code>\u00a0to refresh the element&#8217;s Shadow DOM with the updated count.<\/p><p>And that&#8217;s it for\u00a0<code>ImperativeCounter<\/code>. In the final line of code, we call the browser&#8217;s Custom Elements API to register our new element with the tag name\u00a0<code>i-counter<\/code>. When calling\u00a0<code>define<\/code>, your component&#8217;s tag name\u00a0<em>must<\/em>\u00a0contain a hyphen. The browser will throw an exception if there&#8217;s no hyphen. The official Custom Elements spec contains\u00a0<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/custom-elements.html#valid-custom-element-name\" target=\"_blank\" rel=\"noopener noreferrer\">a detailed explanation<\/a>\u00a0of what constitutes a valid tag name.<\/p><p>Now, let&#8217;s take a look at\u00a0<code>DeclarativeCounter<\/code>. You can find it in\u00a0<code>DeclarativeCounter.js<\/code>\u00a0in\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/react-webcomponents-2019?file=DeclarativeCounter.js\" target=\"_blank\" rel=\"noopener noreferrer\">the StackBlitz workspace<\/a>. This element works a bit differently than our imperative counter. Instead of calling methods to update the counter&#8217;s state, we&#8217;ll just need to set the value of the element&#8217;s\u00a0<code>count<\/code>\u00a0attribute \u2013 in much the same way we set a prop on a React element.<\/p><p>As a result of this, the mechanics of our custom element class are a bit different:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-db24173 elementor-widget elementor-widget-code-highlight\" data-id=\"db24173\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>class DeclarativeCounter extends HTMLElement {\r\n  constructor() {\r\n    super(); \r\n    this.shadow = this.attachShadow({ mode: 'open'});\r\n  }\r\n\r\n  static get observedAttributes() {\r\n      return ['count']\r\n  }\r\n\r\n  attributeChangedCallback(attrName, oldVal, newVal) {\r\n      this.currentCount = newVal;\r\n      this.update();\r\n  }\r\n\r\n  connectedCallback() {\r\n      this.currentCount = this.getAttribute('count') || 0;\r\n      this.update();\r\n  }\r\n\r\n  update() {\r\n    this.shadow.innerHTML = `<div><b>Count:<\/b> ${this.currentCount}<\/div>`; \r\n  }\r\n}\r\n\r\nwindow.customElements.define('d-counter', DeclarativeCounter);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9a2c8aa elementor-widget elementor-widget-text-editor\" data-id=\"9a2c8aa\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We begin by attaching the element&#8217;s Shadow DOM in the class constructor. Note that we didn&#8217;t do any additional setup in the constructor. This is because reading element attributes in the constructor isn&#8217;t reliable \u2013 it&#8217;ll\u00a0<em>probably<\/em>\u00a0work if you&#8217;re using the custom element directly in HTML, but as of React 16.8, it won&#8217;t work while using your custom element in React. Because of this, we&#8217;ll defer the reading of the count attribute until later in the component&#8217;s lifecycle.<\/p><p>Next, we see a static property getter called\u00a0<code>observedAttributes<\/code>. We add this getter to tell the browser the attributes for which our element wants to be notified when the property is changed. If we don&#8217;t do this, the browser will inform the element when any of its attributes change, which usually isn&#8217;t a problem, but might make the browser do more work than it needs to.<\/p><p>This getter must return an array of strings that represent the names of the attributes our element cares about. Our declarative counter only cares about the\u00a0<code>count<\/code>\u00a0attribute, so we return an array containing a single string. As we&#8217;ll see in a moment, telling the browser we only care about changes to\u00a0<code>count<\/code>\u00a0will let us use a nice little shortcut.<\/p><p>Next up, we see an instance method named\u00a0<code>attributeChangedCallback<\/code>. This is part of the Custom Elements API and is called whenever one of the attributes our element has said it cares about is updated. It takes three parameters: the first contains the name of the attribute that was updated, the second contains the old attribute value, and the third contains the new attribute value.<\/p><p>Normally, if a custom element is observing changes on several attributes, you&#8217;ll need to write code to check\u00a0<em>which<\/em>\u00a0attribute changed before you decide what to do. Here&#8217;s where the shortcut comes in: since\u00a0<code>DeclarativeCounter<\/code>\u00a0told the browser that it only cares about changes to\u00a0<code>count<\/code>, its\u00a0<code>attributeChangedCallback<\/code>\u00a0will only be called when count is updated.<\/p><p>So, we skip checking the name of the attribute that was changed, and simply update the class&#8217;\u00a0<code>currentCount<\/code>\u00a0instance variable, then call\u00a0<code>update<\/code>\u00a0to refresh the element&#8217;s Shadow DOM.<\/p><p>Next, we see a method named\u00a0<code>connectedCallback<\/code>. This callback is another part of the Custom Elements API. It is called after the browser creates a custom element and adds it to the DOM. Here, we do a bit of setup for our element \u2013 we set the value of the\u00a0<code>currentCount<\/code>\u00a0instance variable based on the value of the element&#8217;s\u00a0<code>count<\/code>\u00a0attribute, with a fallback of setting it to 0 if\u00a0<code>count<\/code>\u00a0is missing. Once we&#8217;ve done this, we call update to set the initial state of the element&#8217;s Shadow DOM.<\/p><p>With that, all of the hard work is out of the way. The\u00a0<code>update<\/code>\u00a0method in\u00a0<code>DeclarativeCounter<\/code>\u00a0is identical to the one in\u00a0<code>ImperativeCounter<\/code>, and that&#8217;s it for the\u00a0<code>DeclarativeCounter<\/code>\u00a0class.<\/p><p>We make one final call to register the custom element under the tag name\u00a0<code>d-counter<\/code>. Now that we&#8217;ve created and registered our components, let&#8217;s see how we&#8217;d use them in a React app.<\/p><h2 id=\"adding-our-components-to-a-react-app\">Adding Our Components to a React App<\/h2><p>Now that we&#8217;ve created some web components and understand how they work, it&#8217;s time to put them to use in a real, live React app!<\/p><p>We\u2019re going to focus on using Web Components in a functional React component using hooks. Hooks may be new to React, and while there are some dissenting voices who don\u2019t like them, the majority of the React community seems to be all-in on hooks.<\/p><p>We&#8217;ve been here before. Way back in 2013, the only way to create React components was by calling\u00a0<code>React.createClass<\/code>. Eventually, class-based components appeared. Suddenly, everyone was writing their components using ES2015 classes.<\/p><p>It feels like hooks are following a similar trend. Using them and understanding them will help you stay ahead of the game in the fast-changing\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0and React world.<\/p><p>If you&#8217;ve never used hooks in React, fear not \u2013 I&#8217;ll also include a component that demonstrates how to use our custom components in a class-based React component so you can compare the two approaches. You&#8217;ll see that they aren&#8217;t all that different.<\/p><p>Let&#8217;s take a look at the code. You can find it all on the same StackBlitz workspace where we examined our Web Components:\u00a0<a href=\"https:\/\/stackblitz.com\/edit\/react-webcomponents-2019\">https:\/\/stackblitz.com\/edit\/react-webcomponents-2019<\/a>. Open up the components folder, and then open the CounterHook.js file. This is what you&#8217;ll see:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40e98d7 elementor-widget elementor-widget-code-highlight\" data-id=\"40e98d7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import React, { Component, useState, useRef } from 'react';\r\nimport NavBar from '..\/containers\/NavBar';\r\nimport Card from '..\/containers\/Card';\r\nimport CounterBox from '..\/containers\/CounterBox';\r\n\r\nexport default () => {\r\n  const counterElement = useRef(null);\r\n  const [count, setCount] = useState(0);\r\n\r\n  const incrementCounters = () => {\r\n    \/\/ increment the declarative counter\r\n    setCount(count + 1);\r\n    \/\/ increment the imperative counter\r\n    counterElement.current.increment();\r\n  }\r\n\r\n  const decrementCounters = () => {\r\n    \/\/ decrement the declarative counter\r\n    setCount(count - 1);\r\n    \/\/ decrement the imperative counter\r\n    counterElement.current.decrement();\r\n  }\r\n\r\n\r\n  return (\r\n    <>\r\n      <NavBar title=\"Web Components + React = \u2764\ufe0f\" \/>\r\n      <Card title=\"Web Component Counters\">\r\n        <CounterBox>\r\n          <h5>Imperative Counter<\/h5>\r\n          <i-counter ref={counterElement}><\/i-counter>\r\n        <\/CounterBox>\r\n        <CounterBox>\r\n          <h5>Declarative Counter<\/h5>\r\n          <d-counter count={count}><\/d-counter>\r\n        <\/CounterBox>\r\n        <button \r\n          onClick={incrementCounter} \r\n          className=\"btn btn-primary\">Increment<\/button>\r\n        <button \r\n          onClick={decrementCounter} \r\n          className=\"btn btn-primary\">Decrement<\/button>\r\n      <\/Card>\r\n    <\/>\r\n  )\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-73c34a9 elementor-widget elementor-widget-text-editor\" data-id=\"73c34a9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>There&#8217;s nothing too exciting at the beginning. We import React, and then import the\u00a0<code style=\"font-size: 16px;\">useState<\/code>\u00a0and\u00a0<code style=\"font-size: 16px;\">useRef<\/code>\u00a0hooks. If you&#8217;re still getting used to hooks and need a refresher, React&#8217;s documentation has\u00a0<a style=\"background-color: #ffffff;\" href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener noreferrer\">a great introduction to hooks<\/a>. We then import a few Bootstrap-based container components that will make our final counter app a little bit prettier:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13ee54b elementor-widget elementor-widget-code-highlight\" data-id=\"13ee54b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>import React, { Component, useState, useRef } from 'react';\r\nimport NavBar from '..\/containers\/NavBar';\r\nimport Card from '..\/containers\/Card';\r\nimport CounterBox from '..\/containers\/CounterBox';<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cb8c26 elementor-widget elementor-widget-text-editor\" data-id=\"6cb8c26\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Inside our component, we set up our two hooks:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d673a7 elementor-widget elementor-widget-code-highlight\" data-id=\"8d673a7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const counterElement = useRef(null);\r\nconst [count, setCount] = useState(0);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d184cc3 elementor-widget elementor-widget-text-editor\" data-id=\"d184cc3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>These are simple: we&#8217;re setting up a\u00a0<code>ref<\/code>\u00a0that React will populate when it mounts the component and creating a bit of state named\u00a0<code>count<\/code>\u00a0with a default value of 0 and a setter named\u00a0<code>setCount<\/code>.<\/p><p>Next, we have two functions:\u00a0<code>incrementCounters<\/code>\u00a0and\u00a0<code>decrementCounters<\/code>. Let&#8217;s take a closer look at these, because they illustrate the difference between working with imperative and declarative web components. First,\u00a0<code>incrementCounters<\/code>:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-67684f1 elementor-widget elementor-widget-code-highlight\" data-id=\"67684f1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const incrementCounters = () => {\r\n    \/\/ increment the declarative counter\r\n    setCount(count + 1);\r\n    \/\/ increment the imperative counter\r\n    counterElement.current.increment();\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ce285b1 elementor-widget elementor-widget-text-editor\" data-id=\"ce285b1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>For the declarative counter, we&#8217;re just using\u00a0<code>setCount<\/code>\u00a0to update the value of the React component&#8217;s state. This is identical to what we&#8217;d do if our declarative Web Component were a React component that received its count via props. And that makes sense \u2013 in both cases, the component itself is stateless and is having its count value pushed in via props (for React components) or attributes (for Web Components).<\/p><p>For the imperative counter, things are a bit different. Its state is internal, so we can&#8217;t push it in via an attribute. Instead, we must call the component&#8217;s\u00a0<code>increment<\/code>\u00a0method. The only bit that might look strange is the call to\u00a0<code>current<\/code>. It is part of React&#8217;s refs API. A call to the\u00a0<code>useRef<\/code>\u00a0hook (or to\u00a0<code>React.createRef<\/code>\u00a0in a class-based component) returns an object with a\u00a0<code>current<\/code>\u00a0property that stores the physical DOM element that is assigned in the component&#8217;s JSX template.<\/p><p>Next, we see that\u00a0<code>decrementCounters<\/code>\u00a0is exactly the same, except we&#8217;re decreasing the counter values instead of increasing them:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ab74021 elementor-widget elementor-widget-code-highlight\" data-id=\"ab74021\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const decrementCounters = () => {\r\n    \/\/ decrement the declarative counter\r\n    setCount(count - 1);\r\n    \/\/ decrement the imperative counter\r\n    counterElement.current.decrement();\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f68c093 elementor-widget elementor-widget-text-editor\" data-id=\"f68c093\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Finally, we have the JSX markup that renders our counters:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21a6b78 elementor-widget elementor-widget-code-highlight\" data-id=\"21a6b78\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>return (\r\n\r\n    <>\r\n      <NavBar title=\"Web Components + React = \u2764\ufe0f\" \/>\r\n      <Card title=\"Web Component Counters\">\r\n        <CounterBox>\r\n          <h5>Imperative Counter<\/h5>\r\n          <i-counter ref={counterElement}><\/i-counter>\r\n        <\/CounterBox>\r\n        <CounterBox>\r\n          <h5>Declarative Counter<\/h5>\r\n          <d-counter count={count}><\/d-counter>\r\n        <\/CounterBox>\r\n        <button \r\n          onClick={incrementCounters} \r\n          className=\"btn btn-primary\">Increment<\/button>\r\n        <button \r\n          onClick={decrementCounters} \r\n          className=\"btn btn-primary\">Decrement<\/button>\r\n      <\/Card>\r\n    <\/>\r\n  )<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-48328df elementor-widget elementor-widget-text-editor\" data-id=\"48328df\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Most of the markup is devoted to creating the user interface, so let&#8217;s zero in on the critical parts:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7f00651 elementor-widget elementor-widget-code-highlight\" data-id=\"7f00651\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><i-counter ref={counterElement}><\/i-counter><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1985f2f elementor-widget elementor-widget-text-editor\" data-id=\"1985f2f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Here, we&#8217;re creating an instance of the imperative counter element we defined in\u00a0<code style=\"font-size: 16px;\">ImperativeCounter.js<\/code>. Notice that we&#8217;re using the ref attribute to assign the element ref to the variable we created earlier.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9709b4c elementor-widget elementor-widget-code-highlight\" data-id=\"9709b4c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><d-counter count={count}><\/d-counter><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8b6c19 elementor-widget elementor-widget-text-editor\" data-id=\"a8b6c19\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>And here, we&#8217;re creating an instance of our declarative counter. All we&#8217;re doing is passing in our React component&#8217;s\u00a0<code>count<\/code>\u00a0state value to the declarative counter&#8217;s\u00a0<code>count<\/code>\u00a0attribute. As mentioned earlier, this is exactly the same way you&#8217;d pass state to a React component via props.<\/p><p>Finally, we add two buttons to increment and decrement our counters:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a8390de elementor-widget elementor-widget-code-highlight\" data-id=\"a8390de\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><button \r\n    onClick={incrementCounters} \r\n     className=\"btn btn-primary\">Increment<\/button>\r\n<button \r\n    onClick={decrementCounters} \r\n    className=\"btn btn-primary\">Decrement<\/button><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e92f437 elementor-widget elementor-widget-text-editor\" data-id=\"e92f437\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>These buttons just call the\u00a0<code style=\"font-size: 16px;\">incrementCounters<\/code>\u00a0and\u00a0<code style=\"font-size: 16px;\">decrementCounters<\/code>\u00a0functions. And \u2026 we&#8217;re done! The rest of the app is just standard React app setup boilerplate that you&#8217;ve seen before. If you take a peek in index.js, you\u2019ll see that we import our two Web Components before any React components try to use them:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3ff98d8 elementor-widget elementor-widget-code-highlight\" data-id=\"3ff98d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ import custom elements\r\nimport '.\/web-components\/ImperativeCounter';\r\nimport '.\/web-components\/DeclarativeCounter';<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24d9210a elementor-widget elementor-widget-text-editor\" data-id=\"24d9210a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre><span style=\"color: var( --e-global-color-text ); font-family: var( --e-global-typography-text-font-family ), Sans-serif; font-weight: var( --e-global-typography-text-font-weight ); font-size: 1rem;\">As long as any web components you want to use are loaded and registered before your React app tried to render them, you're good to go.<\/span><br><\/pre><p>The final result is an application that looks like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image1-3.png\" alt=\"image1\"><\/p>\n<p>You can see the final counter app running live here: <a href=\"https:\/\/react-webcomponents-2019.stackblitz.io\/\">https:\/\/react-webcomponents-2019.stackblitz.io\/<\/a><\/p>\n<p>Try it out and notice that React is able to keep both of our Web Component counters in perfect sync despite the fact that they work very differently under the hood.<\/p>\n<p>As promised, I&#8217;ve also added a class-based equivalent to our hook-based React component. You can find it in <code>components\/CounterClass.js<\/code>. It looks and works identically to the hook-based component. Its code is just a little bit more verbose.<\/p>\n<h3 id=\"web-components-with-react-conclusion\">Web Components with React &#8211; Conclusion<\/h3>\n<p>And that&#8217;s it! We\u2019ve learned more about how Web Components work, created our own web components, and learned how to use them in a <a href=\"https:\/\/contentlab.com\/react-hooks-how-to-transition-your-app-from-react-components-to-hooks\/\">React<\/a> app.<\/p>\n<p>You\u2019re now ready to mix Web Components into your apps and make them even more awesome than they already are! Using Web Components with React helps you deliver the best apps possible because you aren\u2019t limited to using React components. For example, if you find a mapping, data visualization, or text editing component that\u2019s only available as a Web Component, you can import it and use it your React application immediately.<\/p>\n<p>For further in-depth reading on Web Components, I recommend the <code>MDN Web Components page<\/code>. It serves as a great introduction to Web Components, and many links that will let you explore every aspect of Web Components in great detail.<\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Web Components. As web developers, we\u2019ve been hearing about them for a long time. In theory, they sound amazing: a browser-native way of defining your own custom components. You can read more about Web Components in our articles\u00a0Web Components &#8211; An Introduction and Practical Usage\u00a0and\u00a0Web Components Introduction: Creating Custom HTML Elements in 2018. JavaScript web [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":5257,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[18,279,240],"tags":[268,273,272,269],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Using Web Components with React in 2019 &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Web Components with React in 2019 &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"Web Components. As web developers, we\u2019ve been hearing about them for a long time. In theory, they sound amazing: a browser-native way of defining your own custom components. You can read more about Web Components in our articles\u00a0Web Components &#8211; An Introduction and Practical Usage\u00a0and\u00a0Web Components Introduction: Creating Custom HTML Elements in 2018. JavaScript web [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-11T18:17:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-01T21:13:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"17 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Using Web Components with React in 2019\",\"datePublished\":\"2019-06-11T18:17:01+00:00\",\"dateModified\":\"2021-12-01T21:13:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/\"},\"wordCount\":3174,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png\",\"keywords\":[\"Angular\",\"HTML\",\"JavaScript\",\"React\"],\"articleSection\":[\"Portfolio\",\"Technical Overview\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/\",\"url\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/\",\"name\":\"Using Web Components with React in 2019 &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png\",\"datePublished\":\"2019-06-11T18:17:01+00:00\",\"dateModified\":\"2021-12-01T21:13:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using Web Components with React in 2019\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Web Components with React in 2019 &#183; Technical Content Marketing | ContentLab","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:\/\/contentlab.com\/using-web-components-with-react-in-2019\/","og_locale":"en_US","og_type":"article","og_title":"Using Web Components with React in 2019 &#183; Technical Content Marketing | ContentLab","og_description":"Web Components. As web developers, we\u2019ve been hearing about them for a long time. In theory, they sound amazing: a browser-native way of defining your own custom components. You can read more about Web Components in our articles\u00a0Web Components &#8211; An Introduction and Practical Usage\u00a0and\u00a0Web Components Introduction: Creating Custom HTML Elements in 2018. JavaScript web [&hellip;]","og_url":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2019-06-11T18:17:01+00:00","article_modified_time":"2021-12-01T21:13:26+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"17 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#article","isPartOf":{"@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Using Web Components with React in 2019","datePublished":"2019-06-11T18:17:01+00:00","dateModified":"2021-12-01T21:13:26+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/"},"wordCount":3174,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png","keywords":["Angular","HTML","JavaScript","React"],"articleSection":["Portfolio","Technical Overview","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/","url":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/","name":"Using Web Components with React in 2019 &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage"},"image":{"@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png","datePublished":"2019-06-11T18:17:01+00:00","dateModified":"2021-12-01T21:13:26+00:00","breadcrumb":{"@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/contentlab.com\/using-web-components-with-react-in-2019\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Using Web Components with React in 2019"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2018\/11\/18.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2763"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2763"}],"version-history":[{"count":7,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2763\/revisions"}],"predecessor-version":[{"id":6198,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2763\/revisions\/6198"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/5257"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2763"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}