Aenean Lacinia Bibendum

consectetur elit

Donec Sed Odio Dui

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Cras Justo Odio

Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna:

  • Aenean lacinia bibendum nulla
  • Donec id elit non mi porta
  • Vivamus sagittis lacus vel augue
  • Cras mattis consectetur purus

Nullam Quis Risus

Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum.

Maecenas Faucibus

Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.

This approach uses textContent and createElement to safely add content without XSS vulnerabilities.

Using the Component

Once defined, you can use it like any HTML element:

<blog-card 
  title="My Post" 
  date="2026-01-26">
</blog-card>

Benefits for This Blog

By using Web Components, this blog:

  • Keeps the HTML clean and semantic
  • Maintains reusable UI patterns
  • Avoids heavy framework dependencies
  • Loads fast with minimal JavaScript

The Lifecycle

Web Components have a simple lifecycle:

  1. constructor() - Element is created
  2. connectedCallback() - Element added to DOM
  3. disconnectedCallback() - Element removed from DOM
  4. attributeChangedCallback() - Attributes change

Conclusion

Web Components provide the reusability of frameworks without the overhead. For a simple blog like this, they're perfect!