SlideShare a Scribd company logo

Leveraging the Power of Custom Elements in Gutenberg

F
F

Originally presented at WordCamp Europe 2019

Leveraging the Power of Custom Elements in Gutenberg

1 of 35
Felix Arntz / WordCamp Europe 2019
Leveraging the Power of
Pillars of Delightful Content Experiences
SecurePerformant Integrated Engaging
1998 2000 2002 2004 2006 2008 2010 2012 2014 2016 2018 2020
XMLHttpRequest ES5
HTML5
HTML4
GraphQL
CSS2
XML-RPC
Server Timing
Web Workers
Reporting API
Service Workers
Web App Manifest
WAI-ARIA
Feature Policy
CSS4
ES10
ES7
Custom Elements
ES9
CSS Shadow Parts
WebAssembly
Intersection Obs.
NEL
Shadow DOM
Media Queries
CSS3
REST
ES3
XHTML 1.0
Evolution of the Open Web *
* This is just a very small sample.
Content Complexity
Leveraging the Power of Custom Elements in Gutenberg
Components to the Rescue
Header Logo
Responsive hero image
Ad
Article Image
Headline
Button Button

Recommended

Web Policies & Reporting
Web Policies & ReportingWeb Policies & Reporting
Web Policies & ReportingFelix Arntz
 
The WordPress Performance Team
The WordPress Performance TeamThe WordPress Performance Team
The WordPress Performance TeamFelix Arntz
 
Interoperability of components built with different frameworks
Interoperability of components built with different frameworksInteroperability of components built with different frameworks
Interoperability of components built with different frameworksSouvik Basu
 
Play Framework on Google App Engine
Play Framework on Google App EnginePlay Framework on Google App Engine
Play Framework on Google App EngineFred Lin
 
WordPress as a Headless CMS - Bronson Quick
WordPress as a Headless CMS - Bronson QuickWordPress as a Headless CMS - Bronson Quick
WordPress as a Headless CMS - Bronson QuickWordCamp Sydney
 

More Related Content

What's hot

Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpackRich Snapp
 
Tomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - WebtaskalifragilistexpialidociousTomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - WebtaskalifragilistexpialidociousServerlessConf
 
Nuxt로 사내서비스 구현하면서 얻은 경험 공유
Nuxt로 사내서비스 구현하면서 얻은 경험 공유Nuxt로 사내서비스 구현하면서 얻은 경험 공유
Nuxt로 사내서비스 구현하면서 얻은 경험 공유민환 조
 
Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_ForceBolt
 
Make Local WordPress Development Simple
Make Local WordPress Development SimpleMake Local WordPress Development Simple
Make Local WordPress Development SimpleWP Engine
 
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...rtCamp
 
VueJS Best Practices
VueJS Best PracticesVueJS Best Practices
VueJS Best PracticesFatih Acet
 
Building SPAs with AngularJS
Building SPAs with AngularJSBuilding SPAs with AngularJS
Building SPAs with AngularJSCezar Carneiro
 
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?CodeValue
 
JAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackJAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackzonathen
 
Pipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSPipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSJaqueline Ramos
 

What's hot (18)

Blazor
BlazorBlazor
Blazor
 
Lazy angular w/ webpack
Lazy angular w/ webpackLazy angular w/ webpack
Lazy angular w/ webpack
 
Tomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - WebtaskalifragilistexpialidociousTomasz Janczuk - Webtaskalifragilistexpialidocious
Tomasz Janczuk - Webtaskalifragilistexpialidocious
 
Nuxt로 사내서비스 구현하면서 얻은 경험 공유
Nuxt로 사내서비스 구현하면서 얻은 경험 공유Nuxt로 사내서비스 구현하면서 얻은 경험 공유
Nuxt로 사내서비스 구현하면서 얻은 경험 공유
 
Blazor introduction
Blazor introductionBlazor introduction
Blazor introduction
 
Blazor
BlazorBlazor
Blazor
 
Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_
 
Stripe con 2021 UI stack
Stripe con 2021 UI stackStripe con 2021 UI stack
Stripe con 2021 UI stack
 
Make Local WordPress Development Simple
Make Local WordPress Development SimpleMake Local WordPress Development Simple
Make Local WordPress Development Simple
 
MEAN stack
MEAN stackMEAN stack
MEAN stack
 
Node on Windows Azure
Node on Windows AzureNode on Windows Azure
Node on Windows Azure
 
Windows Azure Website
Windows Azure WebsiteWindows Azure Website
Windows Azure Website
 
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
Server Side React for WordPress by Muhammad Muhsin @ The JavaScript for WordP...
 
VueJS Best Practices
VueJS Best PracticesVueJS Best Practices
VueJS Best Practices
 
Building SPAs with AngularJS
Building SPAs with AngularJSBuilding SPAs with AngularJS
Building SPAs with AngularJS
 
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
Vitali zaidman Do You Need Server Side Rendering? What Are The Alternatives?
 
JAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stackJAMstack with gatsby, contentful and netlify aka the dream stack
JAMstack with gatsby, contentful and netlify aka the dream stack
 
Pipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSPipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTS
 

Similar to Leveraging the Power of Custom Elements in Gutenberg

Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...Andrei Sebastian Cîmpean
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Marios Fakiolas
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Componentssonumanoj
 
Web Components: Introduction and Practical Use Cases
Web Components: Introduction and Practical Use CasesWeb Components: Introduction and Practical Use Cases
Web Components: Introduction and Practical Use Casessumitamar
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17GreeceJS
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshellLennart Schoors
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Mack Hardy
 
Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...Nidhi Sharma
 
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​FDConf
 
Front-end tower of Babylon
Front-end tower of BabylonFront-end tower of Babylon
Front-end tower of BabylonDenis Radin
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedGil Fink
 
Angular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHEREAngular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHERENadav Mary
 
Web Components: back to the future
Web Components: back to the futureWeb Components: back to the future
Web Components: back to the futureDA-14
 
Web Components v1
Web Components v1Web Components v1
Web Components v1Mike Wilcox
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsArtur Cistov
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison500Tech
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022NAVER D2
 

Similar to Leveraging the Power of Custom Elements in Gutenberg (20)

Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...
 
Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...Web components are the future of the web - Take advantage of new web technolo...
Web components are the future of the web - Take advantage of new web technolo...
 
Web components api + Vuejs
Web components api + VuejsWeb components api + Vuejs
Web components api + Vuejs
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Components
 
Web Components: Introduction and Practical Use Cases
Web Components: Introduction and Practical Use CasesWeb Components: Introduction and Practical Use Cases
Web Components: Introduction and Practical Use Cases
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
Strategies and Tips for Building Enterprise Drupal Applications - PNWDS 2013
 
Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...Lightning web components - Introduction, component Lifecycle, Events, decorat...
Lightning web components - Introduction, component Lifecycle, Events, decorat...
 
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​
«Разрушаем Вавилонскую Башню WWW с помощью веб-компонент»​
 
Front-end tower of Babylon
Front-end tower of BabylonFront-end tower of Babylon
Front-end tower of Babylon
 
Stencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrivedStencil the time for vanilla web components has arrived
Stencil the time for vanilla web components has arrived
 
Angular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHEREAngular elements - embed your angular components EVERYWHERE
Angular elements - embed your angular components EVERYWHERE
 
Web Components: back to the future
Web Components: back to the futureWeb Components: back to the future
Web Components: back to the future
 
Web Components v1
Web Components v1Web Components v1
Web Components v1
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
ReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparisonReactJS vs AngularJS - Head to Head comparison
ReactJS vs AngularJS - Head to Head comparison
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
 
micro-frontends-with-vuejs
micro-frontends-with-vuejsmicro-frontends-with-vuejs
micro-frontends-with-vuejs
 

Recently uploaded

Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspacesttyk
 
history of tau gamma architect.1968.....
history of tau gamma architect.1968.....history of tau gamma architect.1968.....
history of tau gamma architect.1968.....josephiigo
 
UGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxUGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxRiteshsahu101
 
Modern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetModern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetmatt806068
 
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPNIC
 
[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchainhackersuli
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defensethirdeyegen65
 
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionalsthirdeyegen65
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter TuningVarun Garg
 
Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...ssuser7b7f4e
 

Recently uploaded (13)

Red shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's CyberspaceRed shadows ringing in Japan's Cyberspace
Red shadows ringing in Japan's Cyberspace
 
history of tau gamma architect.1968.....
history of tau gamma architect.1968.....history of tau gamma architect.1968.....
history of tau gamma architect.1968.....
 
UGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptxUGBINTERNETBANKING FACILITY LAUNCHED.pptx
UGBINTERNETBANKING FACILITY LAUNCHED.pptx
 
Modern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budgetModern Red Teaming - subverting mature defenses on a budget
Modern Red Teaming - subverting mature defenses on a budget
 
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, ThailandAPAN 57: APNIC Report at APAN 57, Bangkok, Thailand
APAN 57: APNIC Report at APAN 57, Bangkok, Thailand
 
[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain[Hackersuli]Privacy on the blockchain
[Hackersuli]Privacy on the blockchain
 
INTERNET
INTERNETINTERNET
INTERNET
 
Augmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & DefenseAugmented and Mixed Reality Solutions for Aerospace & Defense
Augmented and Mixed Reality Solutions for Aerospace & Defense
 
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical ProfessionalsAugmented and Mixed Reality Solutions for Frontline Medical Professionals
Augmented and Mixed Reality Solutions for Frontline Medical Professionals
 
Riesgos online
Riesgos onlineRiesgos online
Riesgos online
 
B1 Evaluation.docx
B1 Evaluation.docxB1 Evaluation.docx
B1 Evaluation.docx
 
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS  Clarify, Feature Store, Hyper parameter TuningAWS Overview of AWS  Clarify, Feature Store, Hyper parameter Tuning
AWS Overview of AWS Clarify, Feature Store, Hyper parameter Tuning
 
Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...Obstructive jaundice is a medical condition characterized by the yellowing of...
Obstructive jaundice is a medical condition characterized by the yellowing of...
 

Leveraging the Power of Custom Elements in Gutenberg