{"version":"1.0","provider_name":"Digital Innovation Blog","provider_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de","author_name":"Manuel Mauky","author_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/manuelmauky\/","title":"Web Components (Teil 2) \u2013 Einbindung in React","type":"rich","width":600,"height":338,"html":"<blockquote class=\"wp-embedded-content\" data-secret=\"bd0uuXANoW\"><a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/\">Web Components (Teil 2) \u2013 Einbindung in React<\/a><\/blockquote><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/embed\/#?secret=bd0uuXANoW\" width=\"600\" height=\"338\" title=\"&#8222;Web Components (Teil 2) \u2013 Einbindung in React&#8220; &#8211; Digital Innovation Blog\" data-secret=\"bd0uuXANoW\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe><script type=\"text\/javascript\">\n\/* <![CDATA[ *\/\n\/*! This file is auto-generated *\/\n!function(d,l){\"use strict\";l.querySelector&&d.addEventListener&&\"undefined\"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!\/[^a-zA-Z0-9]\/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret=\"'+t.secret+'\"]'),o=l.querySelectorAll('blockquote[data-secret=\"'+t.secret+'\"]'),c=new RegExp(\"^https?:$\",\"i\"),i=0;i<o.length;i++)o[i].style.display=\"none\";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute(\"style\"),\"height\"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):\"link\"===t.message&&(r=new URL(s.getAttribute(\"src\")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener(\"message\",d.wp.receiveEmbedMessage,!1),l.addEventListener(\"DOMContentLoaded\",function(){for(var e,t,s=l.querySelectorAll(\"iframe.wp-embedded-content\"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute(\"data-secret\"))||(t=Math.random().toString(36).substring(2,12),e.src+=\"#?secret=\"+t,e.setAttribute(\"data-secret\",t)),e.contentWindow.postMessage({message:\"ready\",secret:t},\"*\")},!1)))}(window,document);\n\/* ]]> *\/\n<\/script>\n","thumbnail_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","thumbnail_width":1182,"thumbnail_height":666,"description":"Ihrer Idee nach sind Web Components unabh\u00e4ngig von JavaScript-Frameworks einsetzbar. W\u00e4hrend dies beispielsweise bei Angular auch mit wenigen Handgriffen ohne Probleme funktioniert, sieht die Situation bei React leider etwas anders aus.\u200b Warum das so ist und wie man das Problem l\u00f6sen kann, wird in diesem Blogartikel n\u00e4her erl\u00e4utert."}