[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"btz8hO-MXSFLpybqvfjYVBre4OvrEJO1wFySe3Zmv-s":3,"9_t0YFtO844PW3-iCfPxRTbw8yv0-2zzu2bChZFenjo":39,"F7dPegB3N4xc9MHREo73dnfOFpfnPDVbwxxfOirQx3k":75,"Ctqr9Pi4ntTXGhvs_4jg1WAJ94XjRoP64xhYT3sIvvM":198,"_apollo:default":240},{"menu":4},{"__typename":5,"id":6,"name":7,"items":8},"Menu","footer","Fußzeile",[9,24,29,34],{"__typename":10,"id":11,"title":12,"description":13,"url":14,"langcode":15,"internal":20,"expanded":21,"attributes":22},"MenuItem","e2873307-b50a-4aab-b6b2-1950fd99c72e","Impressum",null,"/impressum",{"__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},"2cd9b7c9-142a-4ea3-b898-a0952c54a195","Datenschutz","/datenschutz",{"__typename":23,"class":13},{"__typename":10,"id":30,"title":31,"description":13,"url":32,"langcode":15,"internal":20,"expanded":21,"attributes":33},"a5effba3-5a8c-4125-8d78-0cdba09824db","AGB","/agb",{"__typename":23,"class":13},{"__typename":10,"id":35,"title":36,"description":13,"url":37,"langcode":15,"internal":21,"expanded":21,"attributes":38},"114bf071-bdbb-44cf-85c1-69e9d9e0777d","Newsletter","https://liechtenecker.at/newsletter-subscribe",{"__typename":23,"class":13},{"menu":40},{"__typename":5,"id":41,"name":42,"items":43},"nuxt-main-menu","Nuxt Hauptmenü",[44,50,55,60,65,70],{"__typename":10,"id":45,"title":46,"description":13,"url":47,"langcode":48,"internal":20,"expanded":21,"attributes":49},"9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1","Blog","/know-how",{"__typename":16,"id":17,"name":18,"direction":19},{"__typename":23,"class":13},{"__typename":10,"id":51,"title":52,"description":13,"url":53,"langcode":48,"internal":20,"expanded":21,"attributes":54},"1c7a5430-8a42-4b24-9544-252adabc2f4c","Projekte","/projekte",{"__typename":23,"class":13},{"__typename":10,"id":56,"title":57,"description":13,"url":58,"langcode":48,"internal":20,"expanded":21,"attributes":59},"9c4feedc-79e4-4fbf-b68c-065f33ebfe4c","Sparring","/workshop-ux-sparring-fuer-unternehmen",{"__typename":23,"class":13},{"__typename":10,"id":61,"title":62,"description":13,"url":63,"langcode":48,"internal":20,"expanded":21,"attributes":64},"3b77a27b-272a-489f-843e-53e23ed07741","Trainings","/liechtenecker-ux-academy",{"__typename":23,"class":13},{"__typename":10,"id":66,"title":67,"description":13,"url":68,"langcode":48,"internal":20,"expanded":21,"attributes":69},"ce0bb82b-e1ee-4036-be95-f693a62e9f4a","Über uns","/about",{"__typename":23,"class":13},{"__typename":10,"id":71,"title":72,"description":13,"url":73,"langcode":48,"internal":20,"expanded":21,"attributes":74},"04a19381-81a9-4694-8653-182d8855d2b5","Kontakt","/kontakt",{"__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":118,"postContentElements":13,"evergreen":13,"tags":143,"postWpBody":165,"wpHeaderImage":169,"wpHeaderImageOld":13,"wpHeaderImageOldSmall":13,"wpOgImage":182,"wpPromotedTeaserImage":13,"wpShareDescription":13,"wpShareTitle":113,"wpTeaserText":168,"wpYoastHead":191,"author":192},"NodeWpPost","762","Webcomponents",{"__typename":83,"timestamp":84,"timezone":85,"offset":86,"time":87},"DateTime",1658223878,"UTC","+00:00","2022-07-19T09:44:38+00:00",{"__typename":83,"timestamp":89,"timezone":85,"offset":86,"time":90},1653290793,"2022-05-23T07:26:33+00:00",{"__typename":16,"id":17,"name":18,"direction":19},"/blog/webcomponents",[94,101,108,114],{"__typename":95,"tag":96,"attributes":97},"MetaTagValue","meta",{"__typename":98,"name":99,"content":100},"MetaTagValueAttributes","title","Alles über Webcomponents | 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/webcomponents","canonical",{"__typename":109,"tag":96,"attributes":110},"MetaTagProperty",{"__typename":111,"property":112,"content":113},"MetaTagPropertyAttributes","og:title","Alles über Webcomponents",{"__typename":109,"tag":96,"attributes":115},{"__typename":111,"property":116,"content":117},"og:image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/styles/meta_og_image/public/wp-migration/wordpress-media-image/2022/05/BLOG_SF_Webcomponents_SHARING-1204x630px.jpg?h=3ecc83bb&itok=VjuVkSCw",{"__typename":119,"id":120,"name":121,"path":122,"status":20,"weight":123,"description":124,"langcode":128,"changed":129,"metatag":132},"TermCategories","7","Technologie","/kategorie/technologie",0,{"__typename":125,"processed":126,"format":127},"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":130,"timezone":85,"offset":86,"time":131},1713772777,"2024-04-22T07:59:37+00:00",[133,136,140],{"__typename":95,"tag":96,"attributes":134},{"__typename":98,"name":99,"content":135},"Technologie | Liechtenecker UX Design Studio",{"__typename":95,"tag":96,"attributes":137},{"__typename":98,"name":138,"content":139},"description","Development Themen sowie zukünftige Technologien, mit denen wir uns auseinandersetzen.",{"__typename":102,"tag":103,"attributes":141},{"__typename":105,"href":142,"hreflang":13,"rel":107,"media":13,"sizes":13,"type":13},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/kategorie/technologie",[144,149,153,157,161],{"__typename":145,"id":146,"name":147,"path":148,"weight":123},"TermTags","295","CSS","/tag/css",{"__typename":145,"id":150,"name":151,"path":152,"weight":123},"390","elemente","/tag/elemente",{"__typename":145,"id":154,"name":155,"path":156,"weight":123},"601","HTML","/tag/html",{"__typename":145,"id":158,"name":159,"path":160,"weight":123},"677","javascript","/tag/javascript",{"__typename":145,"id":162,"name":163,"path":164,"weight":123},"1478","web components","/tag/web-components",{"__typename":166,"processed":167,"format":127,"summary":168},"TextSummary","\n\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\u003Cp>Und das Beste: jede:r kann neue Webcomponents entwickeln. Aber fangen wir von vorne an:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Hintergrund\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Webseiten und Webapps bestehen aus meist drei Komponenten, die das Aussehen und Verhalten festlegen:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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  standard-list\">\n            \n\u003Cul>\u003Cli>\u003Cstrong>HTML\u003C/strong> ist das dem Web zugrunde liegende Markup. Es definiert die Struktur einer Website sowie deren Inhalt und ist der einzige Teil einer Website, der auf alle Fälle benötigt wird. Ein Beispiel für eine Website ohne CSS und JavaScript ist z.B. \u003Ca href=\"https://www.utm.edu/staff/jlofaro/Joe%20Lofaro's%20Dive%20Shop%20Project/basic.html\" target=\"_blank\" rel=\"noreferrer noopener\">diese Seite\u003C/a> (inklusive Tippfehler) – (als iFrame eingebunden). Im Laufe der Jahre hat es ständig Erweiterungen des HTML-Standards gegeben, es kamen neue Elemente hinzu, die, nachdem sie von Browsern unterstützt wurden, Einzug in die Entwicklung von Webseiten gefunden haben. \u003C/li>\u003Cli>\u003Cstrong>CSS\u003C/strong> legt das Aussehen einer Seite fest. Es definiert Farben, Schriften, Größen und bestimmt das Layout. Ohne CSS würden alle Webseiten sehr ähnlich aussehen – weißer Hintergrund, schwarze Schrift (und alles, was sonst noch in purem HTML möglich ist) und wenig weitere Merkmale, durch die sich Webseiten untereinander unterscheiden würden.\u003C/li>\u003Cli>\u003Cstrong>JavaScript\u003C/strong> ist die dritte Komponente, die im Web nicht mehr wegzudenken ist.  Zu Anfang belächelt und sogar verhasst, ist JavaScript im letzten Jahrzehnt zu einem unvermeidlichen Bestandteil des Webs geworden. Wenn das HTML die Struktur und das CSS das Aussehen einer Website ist, ist JavaScript die Interaktion. Mit JavaScript kann der Inhalt einer Website dynamisch, ohne neu laden verändert werden, es kann auf das Verhalten des Benutzers reagieren und macht das moderne Web erst möglich. Immer neue Frameworks machen die Entwicklung von noch komplexeren Apps und Webseiten möglich und es vergeht kaum ein Jahr, in dem der JavaScript-Standard nicht um neue Funktionen und Möglichkeiten erweitert wird. \u003C/li>\u003C/ul>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Über Jahre hinweg war im HTML-Standard strikt definiert, welche Elemente zulässig sind, und wie sie miteinander kombiniert werden dürfen.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Navigation? Wird in ein <nav>-Element gepackt. Footer? Klar, es gibt ja ein <footer> Element. \u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Wichtig hierbei ist, dass dies nur eine semantische Auszeichnung ist, welche die Struktur der Webseite definiert. Wie die Navigation und der Footer aussieht, hängt dabei vollständig vom dazugehörigen Styling (CSS) ab.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Aber wie sieht es mit spezielleren Komponenten aus? Beispielsweise mit einem Switcher zwischen Dark- & Light-Mode einer Website, wie man es immer häufiger sieht? Dafür gibt es (und wird es sicher auch) kein spezielles Markup im HTML-Standard geben. \u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Webcomponents to the rescue\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Genau in diese Kerbe schlagen Webcomponents. Webcomponents sind kleine, gekapselte Kombinationen aus den drei Grundbausteinen des Webs: HTML, CSS und JavaScript.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Webcomponents erlauben es jedem Entwickler, selbst HTML-Tags zu ‘erfinden’, die dann, ergänzt um CSS und Javascript, eine Webcomponent bilden.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Auf Webseiten sowie in allen JavaScript Frameworks können Webcomponents eingesetzt werden. Die Einbindung ist einfach: Meist muss nur ein JavaScript-File eingebunden oder über einen Package-Manager installiert werden und schon steht der Verwendung des spezifischen HTML-Tags nichts mehr im Weg.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Um auf das Beispiel von weiter oben zurück zu kommen: Nach der Einbindung des JavaScripts und dem Hinzufügen des Tags <theme-switch> erscheint dieses Element:\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Hier findet ihr ein Beispiel \u003Ca href=\"https://mahozad.ir/theme-switch/\" target=\"_blank\" rel=\"noreferrer noopener\">https://mahozad.ir/theme-switch/\u003C/a>\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Im Hintergrund wird dabei ein knapp 2kB großes Skript geladen, das sich um alles kümmert. Es verändert das Aussehen des Elements und setzt im <html>-Tag der Website ein Attribut, auf das das CSS auf der Website reagieren kann. Dies müsste natürlich von jeder Website selbst implementiert werden.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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>Wieso Webcomponents den Puls der Zeit treffen\u003C/h2>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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  standard-list\">\n            \n\u003Col>\u003Cli>Das Web basiert immer stärker auf Komponenten. Keine Website besteht heutzutage noch aus starren, vordefinierten Seitentypen, die Inhalt immer in der gleichen Struktur abbilden. Eine Hauptanforderung an moderne Webseiten ist es, ein modulares Baukastensystem von Inhaltselementen anzubieten, das den individuellen Umbau jeder Seite möglich macht. Auch alle aktuellen JavaScript-Frameworks funktionieren auf Komponentenbasis. Umso besser ist es also, dass auch der zugrunde liegende HTML-Standard eine Möglichkeit schafft, Komponenten für das Web zu entwickeln.\u003C/li>\u003Cli>Synergien nutzen. Da Webcomponents nicht auf bestimmte Technologien oder Frameworks beschränkt sind, können sie auch überall eingesetzt werden. Wird eine Komponente für die Firmenwebsite entwickelt, ist es oft einfach, dieselbe Komponente auch im Intranet der Firma einzubinden. Damit hat man gleich zwei Vorteile: Das Corporate Branding zieht sich über alle Kanäle durch und Kosten werden reduziert.\u003C/li>\u003Cli>Sie fördern Kollaboration. Der Sinn von Webcomponents ist es, wiederverwendet zu werden. Da dies natürlich nicht nur auf die firmeninterne Welt beschränkt ist, gibt es immer mehr Entwickler, die ihre Webcomponents zur Verfügung stellen. Eine allgemeine Liste vieler Webcomponents gibt es \u003Ca href=\"https://www.webcomponents.org/\" target=\"_blank\" rel=\"noreferrer noopener\">hier.\u003C/a>\u003C/li>\u003C/ol>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n\n\n\n\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\u003Cp>Eine kuratierte Liste der besten Komponenten, die nicht Teil eines größeren UI-Frameworks sind, findet ihr \u003Ca href=\"https://github.com/davatron5000/awesome-standalones\" target=\"_blank\" rel=\"noreferrer noopener\">hier\u003C/a>.\u003C/p>\n        \u003C/div>\n    \u003C/div>\n\u003C/div>\n\n","Webcomponents sind die logische Weiterentwicklung des Internets. Sie ebnen den Weg für wiederverwendbare, modulare Komponenten, die universal einsetzbar sind. Und das Beste: jede:r kann neue Komponenten entwickeln.",{"__typename":170,"id":171,"excludeFromScreenreader":13,"mediaImage":172,"name":178,"path":181,"status":20},"MediaImage","626",{"__typename":173,"url":174,"width":175,"height":176,"alt":177,"title":178,"size":179,"mime":180},"Image","http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2022/05/BLOG_SF_Webcomponents_TITEL-2880x1300px-scaled.jpg",2560,1156,"Titelbild Webcomponents","BLOG_SF_Webcomponents_TITEL-2880x1300px",525696,"image/jpeg","/media/626/edit",{"__typename":170,"id":183,"excludeFromScreenreader":13,"mediaImage":184,"name":188,"path":190,"status":20},"625",{"__typename":173,"url":185,"width":186,"height":187,"alt":13,"title":188,"size":189,"mime":180},"http://liechtenecker-cms.liechtenecker-cms.svc.cluster.local/sites/default/files/wp-migration/wordpress-media-image/2022/05/BLOG_SF_Webcomponents_SHARING-1204x630px.jpg",1204,630,"BLOG_SF_Webcomponents_SHARING-1204x630px",520912,"/media/625/edit","\u003C!-- This site is optimized with the Yoast SEO plugin v15.7 - https://yoast.com/wordpress/plugins/seo/ -->\n\u003Cmeta name=\"description\" content=\"Webcomponents ebnen den Weg für wiederverwendbare, modulare Komponenten, die sich universal einsetzen lassen.\" />\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/webcomponents/\" />\n\u003Cmeta property=\"og:locale\" content=\"de_DE\" />\n\u003Cmeta property=\"og:type\" content=\"article\" />\n\u003Cmeta property=\"og:title\" content=\"Webcomponents - Was ist das? Blogbeitrag Liechtenecker\" />\n\u003Cmeta property=\"og:description\" content=\"Webcomponents ebnen den Weg für wiederverwendbare, modulare Komponenten, die sich universal einsetzen lassen.\" />\n\u003Cmeta property=\"og:url\" content=\"https://legacy.liechtenecker.dev/blog/webcomponents/\" />\n\u003Cmeta property=\"og:site_name\" content=\"Liechtenecker\" />\n\u003Cmeta property=\"article:published_time\" content=\"2022-05-23T09:26:33+00:00\" />\n\u003Cmeta property=\"article:modified_time\" content=\"2022-07-19T11:44:38+00:00\" />\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=\"4 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\":\"WebPage\",\"@id\":\"https://legacy.liechtenecker.dev/blog/webcomponents/#webpage\",\"url\":\"https://legacy.liechtenecker.dev/blog/webcomponents/\",\"name\":\"Webcomponents - Was ist das? Blogbeitrag Liechtenecker\",\"isPartOf\":{\"@id\":\"https://legacy.liechtenecker.dev/#website\"},\"datePublished\":\"2022-05-23T09:26:33+00:00\",\"dateModified\":\"2022-07-19T11:44:38+00:00\",\"author\":{\"@id\":\"https://legacy.liechtenecker.dev/#/schema/person/b24fd61d8a4acf49d8c56f320617f6ec\"},\"description\":\"Webcomponents ebnen den Weg f\\u00fcr wiederverwendbare, modulare Komponenten, die sich universal einsetzen lassen.\",\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https://legacy.liechtenecker.dev/blog/webcomponents/\"]}]},{\"@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":193,"id":194,"myRole":195,"name":196,"nickname":197},"User","23","langgedienter Frontend-Veteran","s-fletzberger","Stephan",{"latestKnowhow":199},[200,215,228],{"__typename":79,"id":201,"title":202,"path":203,"wpTeaserText":204,"wpPromotedTeaserImage":13,"wpHeaderImage":205},"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":170,"id":206,"excludeFromScreenreader":13,"mediaImage":207,"name":213,"path":214,"status":20},"3364",{"__typename":173,"url":208,"width":209,"height":210,"alt":211,"title":13,"size":212,"mime":180},"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":216,"title":217,"path":218,"wpTeaserText":219,"wpPromotedTeaserImage":13,"wpHeaderImage":220},"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":170,"id":221,"excludeFromScreenreader":13,"mediaImage":222,"name":226,"path":227,"status":20},"3355",{"__typename":173,"url":223,"width":209,"height":210,"alt":224,"title":13,"size":225,"mime":180},"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":229,"title":230,"path":231,"wpTeaserText":13,"wpPromotedTeaserImage":13,"wpHeaderImage":232},"1606","UI Trends 2026","/blog/ui-trends-2026",{"__typename":170,"id":233,"excludeFromScreenreader":21,"mediaImage":234,"name":238,"path":239,"status":20},"3303",{"__typename":173,"url":235,"width":209,"height":210,"alt":236,"title":13,"size":237,"mime":180},"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":241,"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e":242,"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195":246,"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db":249,"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d":252,"Menu:footer":255,"ROOT_QUERY":265,"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1":281,"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c":284,"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c":287,"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741":290,"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a":293,"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5":296,"Menu:nuxt-main-menu":299,"TermCategories:7":313,"TermTags:295":324,"TermTags:390":325,"TermTags:601":326,"TermTags:677":327,"TermTags:1478":328,"MediaImage:626":329,"MediaImage:625":331,"User:23":333,"NodeWpPost:762":334,"MediaImage:3364":367,"NodeWpPost:1619":369,"MediaImage:3355":372,"NodeWpPost:1616":374,"MediaImage:3303":377,"NodeWpPost:1606":379},["null","__typename",16,"id",17,"name",18,"direction",19],["null","__typename",10,"id",11,"title",12,"description",13,"url",14,"langcode",243,"internal",20,"expanded",21,"attributes",245],{"__ref":244},"Language:de",["null","__typename",23,"class",13],["null","__typename",10,"id",25,"title",26,"description",13,"url",27,"langcode",247,"internal",20,"expanded",21,"attributes",248],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",30,"title",31,"description",13,"url",32,"langcode",250,"internal",20,"expanded",21,"attributes",251],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",35,"title",36,"description",13,"url",37,"langcode",253,"internal",21,"expanded",21,"attributes",254],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",5,"id",6,"name",7,"items",256],[257,259,261,263],{"__ref":258},"MenuItem:e2873307-b50a-4aab-b6b2-1950fd99c72e",{"__ref":260},"MenuItem:2cd9b7c9-142a-4ea3-b898-a0952c54a195",{"__ref":262},"MenuItem:a5effba3-5a8c-4125-8d78-0cdba09824db",{"__ref":264},"MenuItem:114bf071-bdbb-44cf-85c1-69e9d9e0777d",["null","__typename",266,"menu({\"name\":\"FOOTER\"})",267,"menu({\"name\":\"NUXT_MAIN_MENU\"})",269,"route({\"path\":\"/blog/webcomponents\"})",271,"latestKnowhow({\"excludeId\":\"762\",\"limit\":3})",274],"Query",{"__ref":268},"Menu:footer",{"__ref":270},"Menu:nuxt-main-menu",["null","__typename",77,"entity",272],{"__ref":273},"NodeWpPost:762",[275,277,279],{"__ref":276},"NodeWpPost:1619",{"__ref":278},"NodeWpPost:1616",{"__ref":280},"NodeWpPost:1606",["null","__typename",10,"id",45,"title",46,"description",13,"url",47,"langcode",282,"internal",20,"expanded",21,"attributes",283],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",51,"title",52,"description",13,"url",53,"langcode",285,"internal",20,"expanded",21,"attributes",286],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",56,"title",57,"description",13,"url",58,"langcode",288,"internal",20,"expanded",21,"attributes",289],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",61,"title",62,"description",13,"url",63,"langcode",291,"internal",20,"expanded",21,"attributes",292],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",66,"title",67,"description",13,"url",68,"langcode",294,"internal",20,"expanded",21,"attributes",295],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",10,"id",71,"title",72,"description",13,"url",73,"langcode",297,"internal",20,"expanded",21,"attributes",298],{"__ref":244},["null","__typename",23,"class",13],["null","__typename",5,"id",41,"name",42,"items",300],[301,303,305,307,309,311],{"__ref":302},"MenuItem:9ffc5019-cbd8-4b2e-8eb7-9feae486d4a1",{"__ref":304},"MenuItem:1c7a5430-8a42-4b24-9544-252adabc2f4c",{"__ref":306},"MenuItem:9c4feedc-79e4-4fbf-b68c-065f33ebfe4c",{"__ref":308},"MenuItem:3b77a27b-272a-489f-843e-53e23ed07741",{"__ref":310},"MenuItem:ce0bb82b-e1ee-4036-be95-f693a62e9f4a",{"__ref":312},"MenuItem:04a19381-81a9-4694-8653-182d8855d2b5",["null","__typename",119,"id",120,"name",121,"path",122,"status",20,"weight",123,"description",314,"langcode",315,"changed",316,"metatag",317],["null","__typename",125,"processed",126,"format",127],{"__ref":244},["null","__typename",83,"timestamp",130,"timezone",85,"offset",86,"time",131],[318,320,322],["null","__typename",95,"tag",96,"attributes",319],["null","__typename",98,"name",99,"content",135],["null","__typename",95,"tag",96,"attributes",321],["null","__typename",98,"name",138,"content",139],["null","__typename",102,"tag",103,"attributes",323],["null","__typename",105,"href",142,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",145,"id",146,"name",147,"path",148,"weight",123],["null","__typename",145,"id",150,"name",151,"path",152,"weight",123],["null","__typename",145,"id",154,"name",155,"path",156,"weight",123],["null","__typename",145,"id",158,"name",159,"path",160,"weight",123],["null","__typename",145,"id",162,"name",163,"path",164,"weight",123],["null","__typename",170,"id",171,"excludeFromScreenreader",13,"mediaImage",330,"name",178,"path",181,"status",20],["null","__typename",173,"url",174,"width",175,"height",176,"alt",177,"title",178,"size",179,"mime",180],["null","__typename",170,"id",183,"excludeFromScreenreader",13,"mediaImage",332,"name",188,"path",190,"status",20],["null","__typename",173,"url",185,"width",186,"height",187,"alt",13,"title",188,"size",189,"mime",180],["null","__typename",193,"id",194,"myRole",195,"name",196,"nickname",197],["null","__typename",79,"id",80,"title",81,"changed",335,"created",336,"langcode",337,"path",92,"promote",21,"status",20,"sticky",21,"metatag",338,"category",347,"contentElements",13,"evergreen",13,"tags",349,"wpBody",360,"wpHeaderImage",361,"wpHeaderImageOld",13,"wpHeaderImageOldSmall",13,"wpOgImage",363,"wpPromotedTeaserImage",13,"wpShareDescription",13,"wpShareTitle",113,"wpTeaserText",168,"wpYoastHead",191,"author",365],["null","__typename",83,"timestamp",84,"timezone",85,"offset",86,"time",87],["null","__typename",83,"timestamp",89,"timezone",85,"offset",86,"time",90],{"__ref":244},[339,341,343,345],["null","__typename",95,"tag",96,"attributes",340],["null","__typename",98,"name",99,"content",100],["null","__typename",102,"tag",103,"attributes",342],["null","__typename",105,"href",106,"hreflang",13,"rel",107,"media",13,"sizes",13,"type",13],["null","__typename",109,"tag",96,"attributes",344],["null","__typename",111,"property",112,"content",113],["null","__typename",109,"tag",96,"attributes",346],["null","__typename",111,"property",116,"content",117],{"__ref":348},"TermCategories:7",[350,352,354,356,358],{"__ref":351},"TermTags:295",{"__ref":353},"TermTags:390",{"__ref":355},"TermTags:601",{"__ref":357},"TermTags:677",{"__ref":359},"TermTags:1478",["null","__typename",166,"processed",167,"format",127,"summary",168],{"__ref":362},"MediaImage:626",{"__ref":364},"MediaImage:625",{"__ref":366},"User:23",["null","__typename",170,"id",206,"excludeFromScreenreader",13,"mediaImage",368,"name",213,"path",214,"status",20],["null","__typename",173,"url",208,"width",209,"height",210,"alt",211,"title",13,"size",212,"mime",180],["null","__typename",79,"id",201,"title",202,"path",203,"wpTeaserText",204,"wpPromotedTeaserImage",13,"wpHeaderImage",370],{"__ref":371},"MediaImage:3364",["null","__typename",170,"id",221,"excludeFromScreenreader",13,"mediaImage",373,"name",226,"path",227,"status",20],["null","__typename",173,"url",223,"width",209,"height",210,"alt",224,"title",13,"size",225,"mime",180],["null","__typename",79,"id",216,"title",217,"path",218,"wpTeaserText",219,"wpPromotedTeaserImage",13,"wpHeaderImage",375],{"__ref":376},"MediaImage:3355",["null","__typename",170,"id",233,"excludeFromScreenreader",21,"mediaImage",378,"name",238,"path",239,"status",20],["null","__typename",173,"url",235,"width",209,"height",210,"alt",236,"title",13,"size",237,"mime",180],["null","__typename",79,"id",229,"title",230,"path",231,"wpTeaserText",13,"wpPromotedTeaserImage",13,"wpHeaderImage",380],{"__ref":381},"MediaImage:3303"]