{"id":2370,"date":"2021-04-26T12:57:27","date_gmt":"2021-04-26T12:57:27","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?p=2370"},"modified":"2021-04-26T12:59:02","modified_gmt":"2021-04-26T12:59:02","slug":"web-components-teil-2","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/","title":{"rendered":"Web Components (Teil 2) \u2013 Einbindung in React"},"content":{"rendered":"\n

Im ersten Teil dieser Artikelreihe<\/a> haben wir uns angeschaut, wie man eigene Web Components baut. Nun schauen wir uns die Einbindung in React-Anwendungen an.<\/p>\n\n\n\n

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.<\/a>\u200b Warum das so ist und wie man das Problem l\u00f6sen kann, wird im Folgenden n\u00e4her erl\u00e4utert.<\/p>\n\n\n\n

Prinzipiell lassen sich Web Components auch in React vollst\u00e4ndig nutzen. Allerdings muss man f\u00fcr bestimmte F\u00e4lle zus\u00e4tzlichen Aufwand betreiben und von \u00fcblichen React-Konventionen abweichen. Die Benutzung entspricht nicht mehr unbedingt dem, was React-Entwicklerinnen und -Entwickler erwarten w\u00fcrden.<\/p>\n\n\n\n

Im Wesentlichen gibt es zwei Problemfelder: Einerseits handelt es sich dabei um das Problem „Attribute vs. Properties“, welchem wir uns in diesem Artikel widmen. Andererseits gibt es das Problem der \u201eCustom-Events\u201c \u2013 dieses wird im n\u00e4chsten Teil dieser Reihe behandelt.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Problembeschreibung \u201eAttribute vs. Properties\u201c<\/h2>\n\n\n\n

Wie wir im ersten Teil der Reihe gesehen haben, gibt es zwei M\u00f6glichkeiten, um Daten an eine Web Component zu \u00fcbergeben \u2013 als HTML-Attribut oder als JavaScript-Property.<\/p>\n\n\n\n

In diesem Code-Beispiel wird der „value“ als Attribut im HTML definiert:<\/p>\n\n\n\n

<my-component value=\"something\"><\/my-component><\/pre>\n\n\n\n
<\/div>\n\n\n\n
Hier wird dagegen mittels JavaScript das gleichnamige Property gesetzt:<\/p>\n\n\n\n
const myComponent = document.createElement(\"my-component\")\n\nmyComponent.value = \"something\"<\/pre>\n\n\n\n
<\/div>\n\n\n\n
In JavaScript ist es aber auch m\u00f6glich, explizit das Attribut zu setzen:<\/p>\n\n\n\n
myComponent.setAttribute(\"value\", \"something\")<\/pre>\n\n\n\n
<\/div>\n\n\n\n
JavaScript ist in dieser Hinsicht also flexibler, denn in HTML sind nur Attribute m\u00f6glich \u2013 Properties lassen sich nicht in HTML setzen.<\/p>\n\n\n\n
Wichtig zum Verst\u00e4ndnis ist hierbei: Ob und wie Attribute und Properties von der Komponente verarbeitet bzw. ber\u00fccksichtigt werden, liegt vollst\u00e4ndig in der Implementierung der Komponente. Es gibt zwar die Best Practice<\/a>, im Regelfall sowohl Attribute als auch Properties anzubieten und diese synchron zu halten, aber technisch ist niemand daran gebunden. Es w\u00e4re daher ohne Weiteres m\u00f6glich, entweder nur Attribute oder nur Properties zu akzeptieren oder die beiden mit v\u00f6llig unterschiedlichen Namen zu versehen (womit man aber sicherlich den Unmut der Benutzerinnen und Benutzer der Komponente auf sich ziehen w\u00fcrde).<\/p>\n\n\n\n
Auf der anderen Seite gibt es jedoch auch handfeste Gr\u00fcnde, in manchen F\u00e4llen von dieser Best Practice bewusst abzuweichen<\/a>.<\/p>\n\n\n\n
Ein wichtiger Faktor ist, dass Attribute und Properties unterschiedlich m\u00e4chtig sind: Attribute erlauben nur solche Werte, die als String repr\u00e4sentiert werden k\u00f6nnen, d. h. Strings und Zahlen. Au\u00dferdem kann man durch die An- bzw. Abwesenheit eines Attributes auch Boolean-Werte abbilden. Komplexere Daten wie JavaScript-Objekte oder Funktionen k\u00f6nnen nicht als Attribut \u00fcbergeben oder m\u00fcssten serialisiert werden.<\/p>\n\n\n\n
Bei JavaScript-Properties gibt es diese Beschr\u00e4nkung naturgem\u00e4\u00df nicht. Allerdings haben Properties den Nachteil, dass sie in der Benutzung stets imperativ und nicht deklarativ sind. Anstatt  wie bei HTML einfach deklarativ zu sagen, welchen Zustand man haben m\u00f6chte, muss man Properties mittels Befehlen imperativ der Reihe nachsetzen. Aus Entwicklersicht ist das eher unsch\u00f6n, denn besonders durch Frameworks wie React und (mit leichten Abstrichen) Angular hat man sich an die Vorz\u00fcge von deklarativem Arbeiten gew\u00f6hnt.<\/p>\n\n\n\n
Ein weiterer Unterschied zwischen Attributen und Properties betrifft die Performance: Sowohl Attribute als auch Properties werden nicht nur daf\u00fcr genutzt, Daten von au\u00dfen in die Komponente zu geben, sondern auch, um auf Informationen der Komponente zugreifen zu k\u00f6nnen. Ein sch\u00f6nes Beispiel hierf\u00fcr ist der Standard-HTML-Tag <video>, welcher die aktuelle Wiedergabeposition des abgespielten Videos mittels der JavaScript-Property „currentTime“ anbietet. Bei Abfrage dieser Properties erh\u00e4lt man die Position in Sekunden als Dezimalzahl. Ein dazu passendes HTML-Attribut existiert dagegen nicht. Ein solches Attribut m\u00fcsste andernfalls st\u00e4ndig mit der aktuellen Abspielzeit aktualisiert werden, was im DOM eine relativ kostspielige Operation w\u00e4re. Die Abfrage \u00fcber ein JavaScript-Property l\u00e4sst sich dagegen recht performant l\u00f6sen, da hierf\u00fcr eine Lazy-Getter-Methode implementiert werden kann, die nur anspringt, wenn die Position tats\u00e4chlich abgefragt wird.<\/p>\n\n\n\n
Wir haben bei Web Components somit zwei unterschiedliche Mechanismen f\u00fcr einen sehr \u00e4hnlichen Zweck, die sich dennoch in einigen Aspekten recht deutlich unterscheiden.<\/p>\n\n\n\n
Attribute<\/strong><\/td>Properties<\/strong><\/td><\/tr>
deklarativ<\/td>imperativ<\/td><\/tr>
String, Number, Boolean<\/td>String, Number, Boolean, Date, Object, Function<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
React Props<\/h2>\n\n\n\n
Bei React sieht die Sache etwas \u00fcbersichtlicher aus: React kennt lediglich so genannte „Props“. Da React einen starken Fokus auf deklaratives Programmieren legt, \u00e4hnelt die Benutzung der von HTML-Attributen:<\/p>\n\n\n\n
<MyComponent value=\"something\" \/><\/pre>\n\n\n\n
<\/div>\n\n\n\n
React-Props sind aber nicht auf bestimmte Datentypen beschr\u00e4nkt, sondern erlauben das \u00dcbergeben von beliebigen Daten und auch von Funktionen. Hierf\u00fcr wird anstelle der Anf\u00fchrungsstriche eine Syntax mit geschwungenen Klammern benutzt:<\/p>\n\n\n\n
<MyComponent\n    aDate={ new Date() }\n    aNumber={ 12 }\n    aComplexObject={ {firstname: \"Hugo\", lastname: \"Meier\" } }\n    aFunction={ () => console.log(\"some action\") }\n\/><\/pre>\n\n\n\n
<\/div>\n\n\n\n
In gewisser Weise kombiniert React die jeweils positiven Aspekte von Attributen und Properties in einem einzigen Konzept. <\/p>\n\n\n\n
In der Komponente kommen die Daten in einem „props“-Objekt an, welches die \u00fcbergebenen Werte als Key-Value-Paare enth\u00e4lt:<\/p>\n\n\n\n
const MyComponent = (props) => {\n    const aDate = props.aDate\n    const aNumber = props.aNumber\n    const aComplexObject = props.aComplexObject\n    const aFunction = props.aFunction\n    \/\/...\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
Oder etwas kompakter mittels destructurin<\/a>\u200bg:<\/a><\/p>\n\n\n\n
const MyComponent = ({ aDate, aNumber, aComplexObject, aFunction}) => {\n    \/\/ ...\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
Als React-Entwickler muss ich sagen, dass mir pers\u00f6nlich die React-Variante mit Props deutlich besser gef\u00e4llt als die Unterscheidung zwischen Attributen und Properties mit ihren jeweiligen Eigenarten bei Web Components – dies ist aber Geschmackssache.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Web Components in React<\/h2>\n\n\n\n
Nun ist die API von Web Components aber nun mal so, wie sie ist. Die Frage ist daher: Was passiert, wenn man eine Web Component in React benutzt? Werden „props“ als Attribute oder Properties an die Web Component weitergereicht?<\/p>\n\n\n\n
Zun\u00e4chst entscheidet React anhand der Gro\u00df- und Kleinschreibung des Tags, ob es sich um eine React-Komponente (beginnt mit Gro\u00dfbuchstaben) oder einen HTML-Tag handelt, worunter auch Web Components z\u00e4hlen. Mit Ausnahme einiger Sonderf\u00e4lle bei einigen Standard-HTML-Tags setzt React Props bei HTML-Tags und Web Components immer mittels \u200b„setAttribute“<\/a>\u200b. Das hei\u00dft, dass die Benutzung von Attributen bei Web Components in React keine Probleme bereitet. Anders sieht es aus, wenn explizit JavaScript-Properties benutzt werden m\u00fcssen, z. B. weil komplexe Daten oder Funktionen in die Web Component hineingereicht werden sollen. Dies l\u00e4sst sich gegenw\u00e4rtig mit React nicht deklarativ umsetzen. In gef\u00fchlt 90 % der F\u00e4lle stellt dies kein Problem dar, da es, wie oben bereits angemerkt, als Best Practice gilt, Attribute und Properties synchron zu halten und m\u00f6glichst beide Varianten zu unterst\u00fctzen. Nur in den restlichen 10 % der F\u00e4lle, in denen Properties notwendig sind, weil sich entweder die Autorinnen und Autoren der Web Component nicht an die Best Practice gehalten haben oder ein anderer Grund die Nutzung von Attributen verhindert, m\u00fcssen wir uns etwas einfallen lassen.<\/p>\n\n\n\n
Das hei\u00dft allerdings nicht, dass solche Web Components \u00fcberhaupt nicht in React genutzt werden k\u00f6nnen! Wir k\u00f6nnen lediglich nicht den \u00fcblichen, rein deklarativen Weg gehen, sondern m\u00fcssen auf die von React ebenfalls unterst\u00fctzte, imperative API zur\u00fcckgreifen. Wie dies funktioniert, wollen wir uns im Folgenden anschauen.<\/p>\n\n\n\n
React abstrahiert von konkreten Instanzen von DOM-Knoten. Auch unabh\u00e4ngig von Web Components muss man aber in manchen F\u00e4llen direkt auf DOM-Knoten zugreifen, beispielsweise wenn eine Methode wie „.focus()“ aufgerufen werden soll. F\u00fcr diesen Zweck nutzt React so genannte \u200b„Refs“<\/a>\u200bund genau diesen Mechanismus k\u00f6nnen wir auch f\u00fcr das Setzen von JavaScript-Properties an unseren Web Components benutzen. Im Code sieht das z. B. so aus:<\/p>\n\n\n\n
import React, { useRef, useEffect } from \"react\"\n\nconst MyReactComponent = () => {\n    const elementRef = useRef(null)\n\n    useEffect(() => {\n        if(elementRef.current) {\n            elementRef.current.someProperty = \"value\"\n        }\n    }, [elementRef])\n\n    return <my-custom-element ref={elementRef} \/>\n}<\/pre>\n\n\n\n
<\/div>\n\n\n\n
Mit „const elementRef = useRef(null)<\/code>“ erstellen wir eine Art Container, in die React nach dem Rendern die Referenz zum DOM-Knoten packt. „useEffect<\/code>\u200b“ kann dazu genutzt werden, eine Funktion auszuf\u00fchren, sobald bestimmte Variablen ver\u00e4ndert wurden. Dazu geben wir die „elementRef\u200b<\/code>„-Variable (in ein Array gewrappt) als zweiten Parameter an die\u200b „useEffect<\/code>„-Hook-Funktion. Sobald React die Komponente das erste Mal gerendert hat, wird\u200b die angegebene Funktion ausgef\u00fchrt, so dass unser Property entsprechend gesetzt wird. Wie man sieht, ist der Code doch um einiges umst\u00e4ndlicher als lediglich ein Attribut direkt am Tag zu setzen. Das Beispiel zeigt aber, dass es eben doch m\u00f6glich ist, Web Components in React zu nutzen. Im vierten Teil dieser Artikelreihe werden wir uns noch eine andere Variante anschauen, die besonders bei gr\u00f6\u00dferen Anwendungen, in denen bestimmte Web Components immer wieder eingesetzt werden sollen, besser skaliert. Im n\u00e4chsten Artikel der Reihe schauen wir uns aber zun\u00e4chst das zweite Problem von Web Components mit React genauer an: Die Verarbeitung von Custom-Events.<\/p>\n\n\n\n
<\/div>\n\n\n\n
Fazit<\/h2>\n\n\n\n
Als Zwischenfazit l\u00e4sst sich feststellen, dass die Situation von Web Components mit React kompliziert ist. Auf der einen Seite ist React hervorragend f\u00fcr die Entwicklung von umfangreichen Web-Anwendungen geeignet und daher auch weit verbreitet. Auf der anderen Seite ist es \u00e4u\u00dferst \u00e4rgerlich, dass React bei einer modernen Web-Technologie wie Web Components solche Probleme hat.<\/p>\n\n\n\n
Als Grund hierf\u00fcr lassen sich mindestens zwei Faktoren nennen: Zum einen entstand React zu einer Zeit, in der Web Components bzw. „custom elements“ noch eine blo\u00dfe Idee und weit von der praktischen Umsetzung entfernt waren. Gleichzeitig legt das React-Team gro\u00dfen Wert auf Abw\u00e4rtskompatibilit\u00e4t und schreckt verst\u00e4ndlicherweise vor inkompatiblen \u00c4nderungen in der Art und Weise, wie React-Komponenten geschrieben werden, zur\u00fcck. Die Diskussion dazu, welche Optionen im Raum stehen, um React kompatibel zu Web Components zu machen, kann bei Interesse im Issue-Tracker des Projekts<\/a>\u200b verfolgt werden.<\/p>\n\n\n\n
Der zweite Faktor, den ich hervorheben m\u00f6chte, ist: Die Konzepte von Web Components und React unterscheiden sich relativ stark voneinander, wenn es darum geht, wie Komponenten benutzt werden. React ist vollst\u00e4ndig auf deklaratives Programmieren ausgelegt, w\u00e4hrend Web Components und auch Standard-HTML-Tags eine Mischform vorsehen, die teilweise deklarativ, an einigen Stellen aber eben auch zwingend imperativ ist. Und da React-Entwicklerinnen und -entwickler genau diesen deklarativen Charakter von React m\u00f6gen, kann es nicht die L\u00f6sung sein, die imperative API von Web Components einfach blind zu \u00fcbernehmen. Stattdessen m\u00fcssen Wege gefunden werden, wie eine Zusammenarbeit zwischen diesen beiden „Welten“ m\u00f6glich ist. Leider dauert der Prozess dieser L\u00f6sungssuche mittlerweile schon relativ lange an und zwischenzeitlich schien die Diskussion innerhalb der Community der React-Entwicklerinnen und -Entwickler ein bisschen eingeschlafen zu sein.<\/p>\n\n\n\n
Es bleibt daher nur zu hoffen, dass dieser Prozess wieder Fahrt aufnimmt, so dass Web Components in Zukunft auch in React-Projekten einfach und ohne umst\u00e4ndliche Umwege eingesetzt werden k\u00f6nnen.  <\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":18,"featured_media":1858,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[11],"tags":[576,577,579,580,581,582,583,169,170,208,236,304,570,575],"topics":[584],"class_list":["post-2370","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web","tag-ui-komponenten","tag-spa-frameworks","tag-attribute","tag-properties","tag-attribute-vs-properties","tag-props","tag-react-props","tag-angular","tag-webanwendung","tag-react","tag-webanwendungen","tag-web","tag-zeiss-digital-innovation","tag-web-components","topics-web-components"],"acf":[],"yoast_head":"\nWeb Components (Teil 2) - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"Prinzipiell lassen sich Web Components mit etwas Aufwand auch in React vollst\u00e4ndig nutzen. Wie das klappt, wird in diesem Beitrag erl\u00e4utert.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web Components (Teil 2) \u2013 Einbindung in React\" \/>\n<meta property=\"og:description\" content=\"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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-04-26T12:57:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-26T12:59:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1182\" \/>\n\t<meta property=\"og:image:height\" content=\"666\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manuel Mauky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Web Components (Teil 2) \u2013 Einbindung in React\" \/>\n<meta name=\"twitter:description\" content=\"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.\" \/>\n<meta name=\"twitter:creator\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:site\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manuel Mauky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/\",\"name\":\"Web Components (Teil 2) - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\",\"datePublished\":\"2021-04-26T12:57:27+00:00\",\"dateModified\":\"2021-04-26T12:59:02+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/d7a29c5e55882a2841cfd79b4118132f\"},\"description\":\"Prinzipiell lassen sich Web Components mit etwas Aufwand auch in React vollst\u00e4ndig nutzen. Wie das klappt, wird in diesem Beitrag erl\u00e4utert.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png\",\"width\":1182,\"height\":666},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Components (Teil 2) \u2013 Einbindung in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/d7a29c5e55882a2841cfd79b4118132f\",\"name\":\"Manuel Mauky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg\",\"caption\":\"Manuel Mauky\"},\"description\":\"Manuel arbeitet seit 2010 als Softwareentwickler bei der ZEISS Digital Innovation in G\u00f6rlitz. Neben Java besch\u00e4ftigt er sich vor allem mit JavaScript und TypeScript und der Entwicklung von modernen Webanwendungen. Au\u00dferdem interessiert er sich f\u00fcr Funktionale Programmierung und h\u00e4lt regelm\u00e4\u00dfig Vortr\u00e4ge zu diesen Themen. Manuel hat in G\u00f6rlitz Informatik studiert und organisiert die Java-User-Group G\u00f6rlitz.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/manuelmauky\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Web Components (Teil 2) - ZEISS Digital Innovation Blog","description":"Prinzipiell lassen sich Web Components mit etwas Aufwand auch in React vollst\u00e4ndig nutzen. Wie das klappt, wird in diesem Beitrag erl\u00e4utert.","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:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/","og_locale":"de_DE","og_type":"article","og_title":"Web Components (Teil 2) \u2013 Einbindung in React","og_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.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/","og_site_name":"Digital Innovation Blog","article_publisher":"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/","article_published_time":"2021-04-26T12:57:27+00:00","article_modified_time":"2021-04-26T12:59:02+00:00","og_image":[{"width":1182,"height":666,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","type":"image\/png"}],"author":"Manuel Mauky","twitter_card":"summary_large_image","twitter_title":"Web Components (Teil 2) \u2013 Einbindung in React","twitter_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.","twitter_creator":"@ZEISS_di","twitter_site":"@ZEISS_di","twitter_misc":{"Verfasst von":"Manuel Mauky","Gesch\u00e4tzte Lesezeit":"9\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/","name":"Web Components (Teil 2) - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","datePublished":"2021-04-26T12:57:27+00:00","dateModified":"2021-04-26T12:59:02+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/d7a29c5e55882a2841cfd79b4118132f"},"description":"Prinzipiell lassen sich Web Components mit etwas Aufwand auch in React vollst\u00e4ndig nutzen. Wie das klappt, wird in diesem Beitrag erl\u00e4utert.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi.png","width":1182,"height":666},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/web-components-teil-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/"},{"@type":"ListItem","position":2,"name":"Web Components (Teil 2) \u2013 Einbindung in React"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/d7a29c5e55882a2841cfd79b4118132f","name":"Manuel Mauky","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Mauky_Manuel_Profilbild_300x300px-150x150.jpg","caption":"Manuel Mauky"},"description":"Manuel arbeitet seit 2010 als Softwareentwickler bei der ZEISS Digital Innovation in G\u00f6rlitz. Neben Java besch\u00e4ftigt er sich vor allem mit JavaScript und TypeScript und der Entwicklung von modernen Webanwendungen. Au\u00dferdem interessiert er sich f\u00fcr Funktionale Programmierung und h\u00e4lt regelm\u00e4\u00dfig Vortr\u00e4ge zu diesen Themen. Manuel hat in G\u00f6rlitz Informatik studiert und organisiert die Java-User-Group G\u00f6rlitz.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/manuelmauky\/"}]}},"author_meta":{"display_name":"Manuel Mauky","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/manuelmauky\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/11\/202011_WebComponents_1_fi-600x338.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Web<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Web<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">UI-Komponenten<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">SPA-Frameworks<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Attribute<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Properties<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Attribute vs. Properties<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Props<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">React Props<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Angular<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Webanwendung<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">React<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Webanwendungen<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">web<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/web\/\" class=\"advgb-post-tax-term\">Web Components<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">UI-Komponenten<\/span>","<span class=\"advgb-post-tax-term\">SPA-Frameworks<\/span>","<span class=\"advgb-post-tax-term\">Attribute<\/span>","<span class=\"advgb-post-tax-term\">Properties<\/span>","<span class=\"advgb-post-tax-term\">Attribute vs. Properties<\/span>","<span class=\"advgb-post-tax-term\">Props<\/span>","<span class=\"advgb-post-tax-term\">React Props<\/span>","<span class=\"advgb-post-tax-term\">Angular<\/span>","<span class=\"advgb-post-tax-term\">Webanwendung<\/span>","<span class=\"advgb-post-tax-term\">React<\/span>","<span class=\"advgb-post-tax-term\">Webanwendungen<\/span>","<span class=\"advgb-post-tax-term\">web<\/span>","<span class=\"advgb-post-tax-term\">ZEISS Digital Innovation<\/span>","<span class=\"advgb-post-tax-term\">Web Components<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 5\u00a0Jahren ago","modified":"Updated 5\u00a0Jahren ago"},"absolute_dates":{"created":"Posted on April 26, 2021","modified":"Updated on April 26, 2021"},"absolute_dates_time":{"created":"Posted on April 26, 2021 12:57 p.m.","modified":"Updated on April 26, 2021 12:59 p.m."},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/2370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/comments?post=2370"}],"version-history":[{"count":17,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/2370\/revisions"}],"predecessor-version":[{"id":2398,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/2370\/revisions\/2398"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media\/1858"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media?parent=2370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/categories?post=2370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/tags?post=2370"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/topics?post=2370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}