https://github.com/lloydjatkinson/xkcd-web-component

A Web Component written with Vue.js that fetches xkcd comics
https://github.com/lloydjatkinson/xkcd-web-component

vue vuejs web-component web-components xkcd xkcd-comics

Last synced: over 1 year ago
JSON representation

A Web Component written with Vue.js that fetches xkcd comics

• Host: GitHub
• URL: https://github.com/lloydjatkinson/xkcd-web-component
• Owner: lloydjatkinson
• License: mit
• Archived: true
• Created: 2018-11-21T23:37:45.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-12T17:23:55.000Z (about 3 years ago)
• Last Synced: 2025-03-07T18:05:17.879Z (over 1 year ago)
• Topics: vue, vuejs, web-component, web-components, xkcd, xkcd-comics
• Language: JavaScript
• Homepage:
• Size: 866 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
> **Warning**

> I no longer wish to work with Vue or maintain any Vue projects I have created due to growing frustration with the DX, the dev tooling situation, and it's community. Therefore this repository is unmaintained and archived.

# xkcd-web-component

```html

    

      

      

    

    

        

        

    

```

![](doc/xkcd-screenshot.png)

### What is this?

![](doc/webcomponents.svg)

![](doc/vue.png)

This is a demonstration of a Web Component written using the Vue Javascript framework. It fetches xkcd comics - either the latest or the specified number. This is a standard Vue SFC (single-file component) that is then wrapped up in a Web Component by using Vue CLI. Either the Vue SFC or the Web Component can be used.

A Web Component is also an ES6 module and can be imported and used as such.

### What is a Web Component?

> Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps.

Read more about Web Components:

https://developer.mozilla.org/en-US/docs/Web/Web_Components

https://developers.google.com/web/fundamentals/web-components/

https://www.webcomponents.org/introduction

### Why Web Components?

Web Components are *not* an alternative to Javascript frameworks - this one is written with Vue, but it could just as easily be written in plain ES6+. The Web Component standard contains a number of standards - two of which are the Shadow DOM and Custom Elements standards. Web Components encapsulate and contain their own DOM - ensuring compatibility with any other Javascript or CSS on the page.

Web Components also allow for interoperability between Javascript frameworks - especially ones that closely follow the Web Components standard (such as Vue). This means you can write a Vue Web Component and use it inside an Angular component, for example. You probably wouldn't need to use Web Components if your application is written only in one framework.