From 4a38af849113cf9a8eac8406b6fba282c3075e84 Mon Sep 17 00:00:00 2001
From: thomasabishop <thomas.actonbishop@bbc.co.uk>
Date: Tue, 24 Jan 2023 14:01:07 +0000
Subject: [PATCH] Autosave: 2023-01-24 14:01:07

---
 .../Basics_of_web_components.md               | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 Programming_Languages/Web_Components/Basics_of_web_components.md

diff --git a/Programming_Languages/Web_Components/Basics_of_web_components.md b/Programming_Languages/Web_Components/Basics_of_web_components.md
new file mode 100644
index 0000000..149e921
--- /dev/null
+++ b/Programming_Languages/Web_Components/Basics_of_web_components.md
@@ -0,0 +1,38 @@
+---
+categories:
+  - Programming Languages
+tags:
+  - frontend
+---
+
+# Basics of Web Components
+
+Web Components are custom HTML elements like those we create with frameworks like React and Angular but which are native to HTML and the DOM and therefore do not require any special compilation or libraries.
+
+- Designed to be interoperable with normal HTML
+- Designed to be interoperable with component frameworks like React
+- Designed to be highly modular and reusable
+- Utilise the shadow DOM which is like the virtual DOM but native to the browser and invocable through plain JavaScript. A bit like an iFrame within the "light" DOM and helps greatly with style-scoping.
+
+## Example of composing a web component:
+
+```js
+// MyComponent.js
+class MyComponent extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `<h1>Hello world</h1>`;
+  }
+}
+
+customElements.define("my-component", MyComponent);
+``;
+```
+
+```html
+<!-- index.html -->
+<my-component></my-component>
+```
+
+## Resources
+
+[A complete introdution to Web Components](https://kinsta.com/blog/web-components/)