Web components are a collection of technologies combined to allow developers to create reusable components(bundles of HTML, CSS, JavaScript). They let us effectively describe the implementation of HTML elements that already exist for the web.

1. Welcome to the World of Web
Components

2. Index
● Introduction
● Why Web Components
● Examples
● Modules vs Web Components
● Drupal Connect
● Migrating from Drupal 6/7 to Drupal 8
● Conclusion

3. ● Adhering with existing web standards, web components are nothing
but a collection of technologies combined to allow developers to create
reusable components(bundles of HTML, CSS, JavaScript). They let us
effectively describe the implementation of HTML elements that
already exist for the web.
● Similar to the component-based frameworks like Vue and React, web
components lead us to create component-based applications natively
in the browser.
Introduction

4. With these basics in check, we will walk
through...
● The process of how web component can ease the process with suitable
examples
● Introduce techniques to integrate web components with Drupal
● Discuss the comparison between Drupal modules and web components
in modern web development.

5. Why Web Components?
When a design is to be development phase, the
first step of the front end process is to break down
the design into components. It is very much
possible that the style of an article can be one of
the components that occurs on multiple pages.
Thus, a web component for styling can be utilised
to obtain a standard style on all pages. In this
process, when similar requirements are bundled,
they lead to faster application and reduce
duplication of work.
Design
In development phase
Components
Eg: header, footer, images, etc.
Web components
To obtain a standard style on all page

6. Examples
● For creating custom elements, Polymer can provide a set of
features.
● An open source lightweight web component library, Slim.js,
provides data-binding and extended capabilities for components.
● Stencil, an open source compiler, can generate standards-
compliant web components.
● Hybrids, a UI library, can create Web Components with a simple and
functional API.
● LitElement adds API to help manage element properties and
attributes.

7. Modules Vs Web Components
Autonomous units made up
of components
Act as a group of reusable
codes containing more than
one element
Eg: header, footer, articles,
and sections
Eg: unordered lists, quotes,
cards, tables, etc
Each one has a special style
and function to create an
independent whole
Assimilated in different ways
with other components to
build a different program

8. Drupal Connect
Drupal.org provides for
about 17,000 modules
available to download for
Drupal-powered sites
As an emerging web
industry, web components
replace the layout systems,
template engines, and
endless tpl files

9. Migrate from Drupal 6/7 to Drupal 8
● Display suite, a redefined list of layouts, allows you to take full control
over how your content is displayed using a drag and drop interface in
Drupal
● With the decrease in its requirement on the module side, companies are
scaling up to Drupal 8 to decrease the complexity of the sites along with
opening up pathways to a more fun and progressive programming.
● At the same time, the workflow is improving and getting out of the shell of
Drupal 6/7. Further, the complexity of the Drupal sites on the backend via
hybrid and headless sites is also on a downfall, making an easy transition
towards Drupal 8.

10. How to Use Web Components in Drupal?
● As an emerging web industry, web components replace the layout
systems, template engines, and endless twig files. In this futuristic
approach, Drupal supports Polymer, a powerful JavaScript library, for
building multiple component engines and creating simple reusable and
documented templates.
● It also utilizes the web component entity type so that can save after
parsing html files it finds, making Drupal aware of all the polymer
components it finds.

11. You can also use vanilla JavaScript, HTML and CSS to write web
components. However, web components can only be used with HTML skills
and in back-end templating languages like Twig.
When we adopt web components in line with Drupal's principle to support
established and emergent standards, the proposed resolution is:
● To create a proof of concept project with Web Components using
vanilla JavaScript. This can be used as a basis for related issues and
decisions.
● To decide on if you want to commit to and adopt Web Components

12. Conclusion
● With several open issues related to component based theming
and front-end frameworks, Web Components are very much a
possible resolution in Drupal.
● As Drupal 9 is just around the corner, drupalers await the big leap
forward for UX with better JavaScript and component-based
theming. Till then, Drupal 8 and its features can execute all your
website requirements.

13. Talk to Drupal experts, ping us at
hello@opensenselabs.com to get the best of
Drupal and augmented reality for your future
businesses.

14. THANK YOU