[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":3,"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":49,"6dJQsGFhh4DG7Cl9QMiNsAvH1npCFTkMLNIsyajbJwE":75,"yuMmVcM9f2a8eFYVdqB2GYRCXfvumKGFvUg81EDb1mk":216,"_apollo:default":258},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","nuxt-main-menu","Nuxt Hauptmenü",[9,24,29,34,39,44],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog",null,"/know-how",{"__typename":16,"id":17,"name":18,"direction":19},"Language","de","German","ltr",true,false,{"__typename":23,"class":13},"MenuItemAttributes",{"__typename":10,"id":25,"title":26,"description":13,"url":27,"langcode":15,"internal":20,"expanded":21,"attributes":28},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":20,"expanded":21,"attributes":38},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":40,"title":41,"description":13,"url":42,"langcode":15,"internal":20,"expanded":21,"attributes":43},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":15,"internal":20,"expanded":21,"attributes":48},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__typename":23,"class":13},{"menu":50},{"__typename":5,"id":51,"name":52,"items":53},"footer","Fußzeile",[54,60,65,70],{"__typename":10,"id":55,"title":56,"description":13,"url":57,"langcode":58,"internal":20,"expanded":21,"attributes":59},"e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum","/impressum",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":58,"internal":20,"expanded":21,"attributes":64},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":58,"internal":20,"expanded":21,"attributes":69},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":58,"internal":21,"expanded":21,"attributes":74},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"route":76},{"__typename":77,"entity":78},"RouteInternal",{"__typename":79,"id":80,"title":81,"changed":82,"created":88,"langcode":91,"path":92,"promote":21,"status":20,"sticky":21,"metatag":93,"postCategory":117,"postContentElements":13,"evergreen":13,"tags":142,"postWpBody":176,"wpHeaderImage":13,"wpHeaderImageOld":179,"wpHeaderImageOldSmall":191,"wpOgImage":200,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":13,"wpTeaserText":13,"wpYoastHead":209,"author":210},"NodeWpPost","807","Web Components - Bausteine des Internets",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1554794609,"UTC","+00:00","2019-04-09T07:23:29+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1537256169,"2018-09-18T07:36:09+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/web-components-bausteine-des-internets",[94,101,108,113],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Web Components - Bausteine des Internets | Liechtenecker UX Design Studio",{"__typename":102,"tag":103,"attributes":104},"MetaTagLink","link",{"__typename":105,"href":106,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"MetaTagLinkAttributes","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/blog/web-components-bausteine-des-internets","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":81},"MetaTagPropertyAttributes","og:title",{"__typename":109,"tag":96,"attributes":114},{"__typename":111,"property":115,"content":116},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/wp-migration/wordpress-media-image/2018/09/fb-2-1.jpg?h=2240b8e9&itok=S3WKYnew",{"__typename":118,"id":119,"name":120,"path":121,"status":20,"weight":122,"description":123,"langcode":127,"changed":128,"metatag":131},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":124,"processed":125,"format":126},"Text","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen. ","wp_html",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":83,"timestamp":129,"timezone":85,"offset":86,"time":130},1713772777,"2024-04-22T07:59:37+00:00",[132,135,139],{"__typename":95,"tag":96,"attributes":133},{"__typename":98,"name":99,"content":134},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":136},{"__typename":98,"name":137,"content":138},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":140},{"__typename":105,"href":141,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[143,148,152,156,160,164,168,172],{"__typename":144,"id":145,"name":146,"path":147,"weight":122},"TermTags","80","angular","/tag/angular",{"__typename":144,"id":149,"name":150,"path":151,"weight":122},"340","Development","/tag/development",{"__typename":144,"id":153,"name":154,"path":155,"weight":122},"601","HTML","/tag/html",{"__typename":144,"id":157,"name":158,"path":159,"weight":122},"677","javascript","/tag/javascript",{"__typename":144,"id":161,"name":162,"path":163,"weight":122},"1047","React","/tag/react",{"__typename":144,"id":165,"name":166,"path":167,"weight":122},"1353","typescript","/tag/typescript",{"__typename":144,"id":169,"name":170,"path":171,"weight":122},"1478","web components","/tag/web-components",{"__typename":144,"id":173,"name":174,"path":175,"weight":122},"1504","webdevelopment","/tag/webdevelopment",{"__typename":177,"processed":178,"format":126,"summary":13},"TextSummary","\u003Cdiv class=\"grid-wrapper\">\n    \u003Cdiv class=\"row\">\n        \u003Cdiv class=\"default-left col-xsmall-12 col-medium-6 col-medium-offset-2 col-large-6 col-large-offset-3 \">\n            \n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Was sind Web Components?\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Web Components bauen auf der Idee auf, wiederverwendbare Kleinstkomponenten in Webseiten und Apps einzusetzen, das Rad somit nicht bei jedem Projekt neu erfinden zu müssen und gemeinsam an der Weiterentwicklung dieser Komponenten zu arbeiten.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Das Konzept von Web Components gibt es in der ein oder anderen Form schon sehr lange: Angefangen hat alles mit den proprietären Lösungen von \u003C/span>\u003Ca href=\"https://msdn.microsoft.com/en-us/library/ms532146.aspx\">\u003Cspan style=\"font-weight: 400;\">Microsoft\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\"> (1998) und \u003C/span>\u003Ca href=\"https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XBL\">\u003Cspan style=\"font-weight: 400;\">Mozilla\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\"> (2001), die beide aber kein besonders erfolgreiches Dasein fristeten.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Ein ähnliches Konzept stellen natürlich auch die diversen Plugins für jQuery dar – allen voran natürlich \u003C/span>\u003Ca href=\"https://jqueryui.com/\">\u003Cspan style=\"font-weight: 400;\">jQuery UI\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\"> seit 2007 –, welche es ermöglichten vordefinierten HTML-Syntax mit JavaScript aufzuwerten um so eine bessere User Experience zu schaffen oder auf einfachem Weg oft benutzte Komponenten wie Slider und Galerien zu bauen. \u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Während sich jQuery-Plugins oft nur um den Javascript-Stil der Komponenten kümmerten, ist spätestens seit Aufkommen der beliebten Javascript Frameworks \u003C/span>\u003Ca href=\"https://angular.io/\">\u003Cspan style=\"font-weight: 400;\">Angular\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\"> von Google und \u003C/span>\u003Ca href=\"https://reactjs.org/\">\u003Cspan style=\"font-weight: 400;\">React\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\"> von Facebook der Sprung zu standardisierten Webkomponenten nicht mehr weit:\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Beide Frameworks bauen auf dem Konzept der wiederverwendbaren Komponenten auf, die sich aus einer Mischung aus JavaScript (oder TypeScript), HTML für das Markup und CSS (bzw. SASS) für das Styling zusammensetzen. Dabei können Komponenten beliebig oft in einer Applikation durch die Einbindung eines “\u003C/span>\u003Ca href=\"https://w3c.github.io/webcomponents/spec/custom/\">\u003Cspan style=\"font-weight: 400;\">Custom Elements\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\">”, also z.B. <app-datepicker></app-datepicker> für eine Datumsauswahl, verwendet werden.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Web Components selbst entwickeln sich seit 2012 als \u003C/span>\u003Ca href=\"https://www.w3.org/TR/2012/WD-components-intro-20120522/#decorators-vs-custom-elements\">\u003Cspan style=\"font-weight: 400;\">Draft des W3C\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\">, Browserhersteller implementieren den Standard mit unterschiedlichen Prioritäten: Während Google mit Chrome und Mozilla mit Firefox gut dabei sind, unterstützt Safari nur einen Teil der Features. Microsoft arbeitet an einer Implementierung in IE Edge. Ohne Polyfills wird der Internet Explorer aber gar nicht unterstützt.\u003C/span>\u003C/p>\n\u003Cp> \u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Was bieten Web Components?\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Web Components gehen weiter als reine Javascript-Lösungen: sie sind Framework-agnostisch. D.h. egal welches oder ob überhaupt ein gängiges Javascript Framework eingebunden ist, Web Components können immer benutzt werden.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Auch wenn Web Components theoretisch ohne die Hilfe eines Frameworks eingesetzt werden können, wird in der Praxis dennoch sehr oft zu einem Framework von Google gegriffen: \u003C/span>\u003Ca href=\"https://www.polymer-project.org/\">\u003Cspan style=\"font-weight: 400;\">Polymer\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\">. \u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Polymer kümmert sich um die Einbindung der Webkomponenten (seit Version 3 über npm), kümmert sich um nötige Polyfills, damit die Komponenten auch garantiert in allen modernen Browsern laufen und hilft bei der effizienten Erstellung der Komponenten.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Im Grunde versprechen Web Component eines: Wiederverwendbarkeit. Egal ob in der Website des großen Autohauses oder dem Intranetprojekt einer Bank, oft werden Einzelteile mit identischer oder ähnlicher Funktionsweise öfter in einem Projekt oder in verschiedenen Projekten benötigt.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Da bringt es natürlichen einen immensen Vorteil, wenn mann schnell, einfach und kostensparend auf Komponenten zurückgreifen zu kann, die von einer großen Anzahl an Entwicklern benutzt werden. \u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Über Marktplätze wie z.B. \u003C/span>\u003Ca href=\"https://www.webcomponents.org/\">\u003Cspan style=\"font-weight: 400;\">Web Components.org\u003C/span>\u003C/a>\u003Cspan style=\"font-weight: 400;\"> kann nach beliebten Komponenten gesucht werden.\u003C/span>\u003C/p>\n\u003Cdiv data-entity-type=\"media\" data-entity-uuid=\"6a4f5593-d714-4dc6-a8f3-b3b1ac0ddbfd\" data-langcode=\"de\" class=\"embedded-entity\">\u003Cdiv>\n  \n  \n  \u003Cdiv>\n    \u003Cdiv class=\"visually-hidden\">Bild\u003C/div>\n              \u003Cdiv>    \u003Cpicture>\n                  \u003Csource srcset=\"/sites/default/files/styles/image_width_medium/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=QSWwhxj- 1x, /sites/default/files/styles/image_width_medium_x2/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=QkwGplYl 2x\" media=\"all and (min-width: 1024px) and (max-width: 1439px)\" type=\"image/webp\" width=\"1440\" height=\"810\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_small/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=P39Lsfzd 1x, /sites/default/files/styles/image_width_small_x2/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=9gShNN9C 2x\" media=\"all and (min-width: 745px) and (max-width: 1023px)\" type=\"image/webp\" width=\"1024\" height=\"576\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xsmall/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=EJp1K2rm 1x, /sites/default/files/styles/image_width_xsmall_x2/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=RdRRxP_3 2x\" media=\"all and (min-width: 480px) and (max-width: 744px)\" type=\"image/webp\" width=\"745\" height=\"419\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_xxsmall/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=-nVFZSvb 1x, /sites/default/files/styles/image_width_xxsmall_x2/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=pFp9ESl2 2x\" media=\"all and (max-width: 479px)\" type=\"image/webp\" width=\"480\" height=\"270\">\n              \u003Csource srcset=\"/sites/default/files/styles/image_width_large/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=8bF-9y10 1x, /sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.webp?itok=4X1H-NJE 2x\" type=\"image/webp\" width=\"1620\" height=\"911\">\n                  \u003Cimg loading=\"lazy\" width=\"3240\" height=\"1823\" src=\"/sites/default/files/styles/image_width_large_x2/public/wp-migration/wordpress-media-image/2018/09/www.webcomponents.org_FullHD-1.png.jpg?itok=4X1H-NJE\" alt title=\"webcomponents.org\">\n\n  \u003C/picture>\n\n\u003C/div>\n          \u003C/div>\n\n\u003C/div>\n\u003C/div>\n\u003Cp>\u003Cbr>\n\u003Cspan style=\"font-weight: 400;\">Eingebunden werden die Komponenten dann meist per Paketmanager wie npm, was den weiteren Vorteil hat, dass Patches für Probleme oder neue Features mit einem einfachen Terminal-Kommando in die eigene App eingespielt werden können.\u003C/span>\u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Die Probleme\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Während sich die Weiterverwendung von Web Components (oder generell Komponenten in anderen Javascript-Frameworks) zunächst vielversprechend anhört, muss sich das Konzept oft der harten Realität des Alltags geschlagen geben:\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Nicht selten führen sehr spezifische Anforderungen für jedes einzelne Projekt dazu, dass sehr individuelle Komponenten geschaffen werden, die nicht oder nur sehr schwer in anderen Projekten weiterverwendet werden können. Auch der Vorteil, dass bestehende Web Components aus Dritthänden weiterentwickelt werden, versiegt schnell, wenn für das Projekt relevante Änderungen an der Komponente durchgeführt werden müssen, die ein späteres Update nicht mehr möglich machen.\u003C/span>\u003C/p>\n\u003Ch2>\u003Cspan style=\"font-weight: 400;\">Die Zukunft\u003C/span>\u003C/h2>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Trotz aller Alltagsprobleme, die Web Components daran hindern, ihr primäres Ziel – die Wiederverwendbarkeit – zu erreichen, ist das dahinterliegende Konzept zu verlockend, um \u003C/span>\u003Cspan style=\"font-weight: 400;\">um nicht auch in Zukunft Triebfeder für effiziente Arbeitsweisen so sein\u003C/span>\u003Cspan style=\"font-weight: 400;\">.\u003C/span>\u003C/p>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Die großen Javascript Frameworks implementieren zwar alle eine leicht unterschiedliche Art des Komponenten-Konzepts, dennoch profitieren alle von der grundlegenden Idee, die Komponenten bieten.\u003C/span>\u003C/p>\n\u003Cp> \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n",{"__typename":180,"id":181,"excludeFromScreenreader":13,"mediaImage":182,"name":187,"path":190,"status":20},"MediaImage","1189",{"__typename":183,"url":184,"width":185,"height":186,"alt":13,"title":187,"size":188,"mime":189},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2018/09/wide-1.jpg",1920,500,"wide",279146,"image/jpeg","/media/1189/edit",{"__typename":180,"id":192,"excludeFromScreenreader":13,"mediaImage":193,"name":197,"path":199,"status":20},"1190",{"__typename":183,"url":194,"width":195,"height":196,"alt":13,"title":197,"size":198,"mime":189},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2018/09/small-2-1.jpg",922,519,"small",208348,"/media/1190/edit",{"__typename":180,"id":201,"excludeFromScreenreader":13,"mediaImage":202,"name":206,"path":208,"status":20},"1191",{"__typename":183,"url":203,"width":204,"height":205,"alt":13,"title":206,"size":207,"mime":189},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2018/09/fb-2-1.jpg",1200,628,"fb",313006,"/media/1191/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Web Components sollten die Bausteine des Internets werden. Aber tun sie das auch? Oder sind sie durch die Übermächtige Konkurrenz aus Javascript Frameworks wie Angular oder React aufs Abstellgleis geschoben worden?\" />\n\u003Cmeta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" />\n\u003Clink rel=\"canonical\" href=\"https://legacy.liechtenecker.dev/blog/web-components-bausteine-des-internets/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Web Components - Bausteine des Internets - Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Web Components sollten die Bausteine des Internets werden. Aber tun sie das auch? Oder sind sie durch die Übermächtige Konkurrenz aus Javascript Frameworks wie Angular oder React aufs Abstellgleis geschoben worden?\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/web-components-bausteine-des-internets/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2018-09-18T09:36:09+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2019-04-09T09:23:29+00:00\" />\n\u003Cmeta property=\"og:image\" content=\"https://legacy.liechtenecker.dev/wp-content/uploads/2018/09/www.webcomponents.org_FullHD-1.png\" />\n\u003Cmeta name=\"twitter:card\" content=\"summary_large_image\" />\n\u003Cmeta name=\"twitter:label1\" content=\"Geschätzte Lesezeit\">\n\t\u003Cmeta name=\"twitter:data1\" content=\"3 Minuten\">\n\u003Cscript type=\"application/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https://legacy.liechtenecker.dev/#website\",\"url\":\"https://legacy.liechtenecker.dev/\",\"name\":\"Liechtenecker\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https://legacy.liechtenecker.dev/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/blog/web-components-bausteine-des-internets/#primaryimage\",\"inLanguage\":\"de-DE\",\"url\":\"https://legacy.liechtenecker.dev/wp-content/uploads/2018/09/www.webcomponents.org_FullHD-1.png\",\"width\":3840,\"height\":2160},{\"@type\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/web-components-bausteine-des-internets/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/web-components-bausteine-des-internets/\",\"name\":\"Web Components - Bausteine des Internets - Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"primaryImageOfPage\":{\"@id\":\"https://legacy.liechtenecker.dev/blog/web-components-bausteine-des-internets/#primaryimage\"},\"datePublished\":\"2018-09-18T09:36:09+00:00\",\"dateModified\":\"2019-04-09T09:23:29+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\"},\"description\":\"Web Components sollten die Bausteine des Internets werden. Aber tun sie das auch? Oder sind sie durch die \\u00dcberm\\u00e4chtige Konkurrenz aus Javascript Frameworks wie Angular oder React aufs Abstellgleis geschoben worden?\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/web-components-bausteine-des-internets/\"]}]},{\"@type\":\"Person\",\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\",\"name\":\"Stephan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https://legacy.liechtenecker.dev/#personlogo\",\"inLanguage\":\"de-DE\",\"url\":\"https://secure.gravatar.com/avatar/400d5f8c531afb609b81aa66c8d56f01?s=96&d=mm&r=g\",\"caption\":\"Stephan\"}}]}\u003C/script>\n\u003C!-- / Yoast SEO plugin. -->",{"__typename":211,"id":212,"myRole":213,"name":214,"nickname":215},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":217},[218,233,246],{"__typename":79,"id":219,"title":220,"path":221,"wpTeaserText":222,"wpPromotedTeaserImage":13,"wpHeaderImage":223},"1619","Behind the scenes: Ein Barrierefreiheits-Audit","/blog/behind-scenes-ein-barrierefreiheits-audit","”Entspricht unsere Website den gesetzlichen Anforderungen und wenn nicht, was genau müssen wir ändern?”\r\nDiese Frage lieben wir. Echt! Und so sieht unsere Antwort aus.",{"__typename":180,"id":224,"excludeFromScreenreader":13,"mediaImage":225,"name":231,"path":232,"status":20},"3364",{"__typename":183,"url":226,"width":227,"height":228,"alt":229,"title":13,"size":230,"mime":189},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-04/Headerbilder%20Blogartikel%20Behind%20the%20scene%20Accessibility%20Audit.jpg",2880,1300,"Headline mit Sujet: Tastatur mit Symbolen für Barrierefreiheit im Fokus auf hellem  Hintergrund",838204,"Headerbilder Blogartikel Behind the scene Accessibility Audit.jpg","/media/3364/edit",{"__typename":79,"id":234,"title":235,"path":236,"wpTeaserText":237,"wpPromotedTeaserImage":13,"wpHeaderImage":238},"1616","Agentic KI trifft Design-System: Wie unser Presentation Maker entstand.","/blog/agentic-ki-trifft-design-system-wie-unser-presentation-maker-entstand","Nein, wir wollen euch jetzt nicht erzählen, was KI alles kann. Aber wir möchten euch zeigen, wie wir mit KI umgehen. \r\n",{"__typename":180,"id":239,"excludeFromScreenreader":13,"mediaImage":240,"name":244,"path":245,"status":20},"3355",{"__typename":183,"url":241,"width":227,"height":228,"alt":242,"title":13,"size":243,"mime":189},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-03/BLOG_Presentation%20Tool_TITEL-2880x1300px_1.jpg","Lukas und Daniel  arbeiten an Computern im Büro.",2621988,"BLOG_Presentation Tool_TITEL-2880x1300px.jpg","/media/3355/edit",{"__typename":79,"id":247,"title":248,"path":249,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":250},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":180,"id":251,"excludeFromScreenreader":21,"mediaImage":252,"name":256,"path":257,"status":20},"3303",{"__typename":183,"url":253,"width":227,"height":228,"alt":254,"title":13,"size":255,"mime":189},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/2026-01/BLOG_Trendbericht%202026.jpg","UI Trends 2026, gelber Hintergrund, schwarze Schrift.",4700748,"BLOG_Trendbericht 2026.jpg","/media/3303/edit",{"Language:de":259,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":260,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":264,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":267,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":270,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":273,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":276,"Menu:nuxt-main-menu":279,"ROOT_QUERY":293,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":309,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":312,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":315,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":318,"Menu:footer":321,"TermCategories:7":331,"TermTags:80":342,"TermTags:340":343,"TermTags:601":344,"TermTags:677":345,"TermTags:1047":346,"TermTags:1353":347,"TermTags:1478":348,"TermTags:1504":349,"MediaImage:1189":350,"MediaImage:1190":352,"MediaImage:1191":354,"User:23":356,"NodeWpPost:807":357,"MediaImage:3364":398,"NodeWpPost:1619":400,"MediaImage:3355":403,"NodeWpPost:1616":405,"MediaImage:3303":408,"NodeWpPost:1606":410},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",261,"internal",20,"expanded",21,"attributes",263],{"__ref":262},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",265,"internal",20,"expanded",21,"attributes",266],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",268,"internal",20,"expanded",21,"attributes",269],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",271,"internal",20,"expanded",21,"attributes",272],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",10,"id",40,"title",41,"description",13,"url",42,"langcode",274,"internal",20,"expanded",21,"attributes",275],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",277,"internal",20,"expanded",21,"attributes",278],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",280],[281,283,285,287,289,291],{"__ref":282},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":284},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":286},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":288},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":290},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":292},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",294,"menu({\"name\":\"NUXT_MAIN_MENU\"})",295,"menu({\"name\":\"FOOTER\"})",297,"route({\"path\":\"/blog/web-components-bausteine-des-internets\"})",299,"latestKnowhow({\"excludeId\":\"807\",\"limit\":3})",302],"Query",{"__ref":296},"Menu:nuxt-main-menu",{"__ref":298},"Menu:footer",["null","__typename",77,"entity",300],{"__ref":301},"NodeWpPost:807",[303,305,307],{"__ref":304},"NodeWpPost:1619",{"__ref":306},"NodeWpPost:1616",{"__ref":308},"NodeWpPost:1606",["null","__typename",10,"id",55,"title",56,"description",13,"url",57,"langcode",310,"internal",20,"expanded",21,"attributes",311],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",313,"internal",20,"expanded",21,"attributes",314],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",316,"internal",20,"expanded",21,"attributes",317],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",319,"internal",21,"expanded",21,"attributes",320],{"__ref":262},["null","__typename",23,"class",13],["null","__typename",5,"id",51,"name",52,"items",322],[323,325,327,329],{"__ref":324},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":326},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":328},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":330},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",118,"id",119,"name",120,"path",121,"status",20,"weight",122,"description",332,"langcode",333,"changed",334,"metatag",335],["null","__typename",124,"processed",125,"format",126],{"__ref":262},["null","__typename",83,"timestamp",129,"timezone",85,"offset",86,"time",130],[336,338,340],["null","__typename",95,"tag",96,"attributes",337],["null","__typename",98,"name",99,"content",134],["null","__typename",95,"tag",96,"attributes",339],["null","__typename",98,"name",137,"content",138],["null","__typename",102,"tag",103,"attributes",341],["null","__typename",105,"href",141,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",144,"id",145,"name",146,"path",147,"weight",122],["null","__typename",144,"id",149,"name",150,"path",151,"weight",122],["null","__typename",144,"id",153,"name",154,"path",155,"weight",122],["null","__typename",144,"id",157,"name",158,"path",159,"weight",122],["null","__typename",144,"id",161,"name",162,"path",163,"weight",122],["null","__typename",144,"id",165,"name",166,"path",167,"weight",122],["null","__typename",144,"id",169,"name",170,"path",171,"weight",122],["null","__typename",144,"id",173,"name",174,"path",175,"weight",122],["null","__typename",180,"id",181,"excludeFromScreenreader",13,"mediaImage",351,"name",187,"path",190,"status",20],["null","__typename",183,"url",184,"width",185,"height",186,"alt",13,"title",187,"size",188,"mime",189],["null","__typename",180,"id",192,"excludeFromScreenreader",13,"mediaImage",353,"name",197,"path",199,"status",20],["null","__typename",183,"url",194,"width",195,"height",196,"alt",13,"title",197,"size",198,"mime",189],["null","__typename",180,"id",201,"excludeFromScreenreader",13,"mediaImage",355,"name",206,"path",208,"status",20],["null","__typename",183,"url",203,"width",204,"height",205,"alt",13,"title",206,"size",207,"mime",189],["null","__typename",211,"id",212,"myRole",213,"name",214,"nickname",215],["null","__typename",79,"id",80,"title",81,"changed",358,"created",359,"langcode",360,"path",92,"promote",21,"status",20,"sticky",21,"metatag",361,"category",370,"contentElements",13,"evergreen",13,"tags",372,"wpBody",389,"wpHeaderImage",13,"wpHeaderImageOld",390,"wpHeaderImageOldSmall",392,"wpOgImage",394,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",13,"wpTeaserText",13,"wpYoastHead",209,"author",396],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":262},[362,364,366,368],["null","__typename",95,"tag",96,"attributes",363],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",365],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",367],["null","__typename",111,"property",112,"content",81],["null","__typename",109,"tag",96,"attributes",369],["null","__typename",111,"property",115,"content",116],{"__ref":371},"TermCategories:7",[373,375,377,379,381,383,385,387],{"__ref":374},"TermTags:80",{"__ref":376},"TermTags:340",{"__ref":378},"TermTags:601",{"__ref":380},"TermTags:677",{"__ref":382},"TermTags:1047",{"__ref":384},"TermTags:1353",{"__ref":386},"TermTags:1478",{"__ref":388},"TermTags:1504",["null","__typename",177,"processed",178,"format",126,"summary",13],{"__ref":391},"MediaImage:1189",{"__ref":393},"MediaImage:1190",{"__ref":395},"MediaImage:1191",{"__ref":397},"User:23",["null","__typename",180,"id",224,"excludeFromScreenreader",13,"mediaImage",399,"name",231,"path",232,"status",20],["null","__typename",183,"url",226,"width",227,"height",228,"alt",229,"title",13,"size",230,"mime",189],["null","__typename",79,"id",219,"title",220,"path",221,"wpTeaserText",222,"wpPromotedTeaserImage",13,"wpHeaderImage",401],{"__ref":402},"MediaImage:3364",["null","__typename",180,"id",239,"excludeFromScreenreader",13,"mediaImage",404,"name",244,"path",245,"status",20],["null","__typename",183,"url",241,"width",227,"height",228,"alt",242,"title",13,"size",243,"mime",189],["null","__typename",79,"id",234,"title",235,"path",236,"wpTeaserText",237,"wpPromotedTeaserImage",13,"wpHeaderImage",406],{"__ref":407},"MediaImage:3355",["null","__typename",180,"id",251,"excludeFromScreenreader",21,"mediaImage",409,"name",256,"path",257,"status",20],["null","__typename",183,"url",253,"width",227,"height",228,"alt",254,"title",13,"size",255,"mime",189],["null","__typename",79,"id",247,"title",248,"path",249,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",411],{"__ref":412},"MediaImage:3303"]