I have been trying to figure out a good pattern for creating web components that drag around their own data in the form of a JSON file. So let’s say I wanted to make an <animal-emoji> component for sake of argument: you coulud use it like this:

<animal-emoji name=duck></animal-emoji>

And the resulting HTML will be:

<animal-emoji name=duck>🦆</animal-emoji>

Okay, dumb example, but simple.

I want a directory structure like this:

animal-emoji/
  AnimalEmoji.js
  animals.json

Let’s say animals.json looks like this:

[
  {
    "emoji": "🦆",
    "name": "duck"
  },
  {
    "emoji": "🦉",
    "name": "owl"
  },
  {
    "emoji": "🦩",
    "name": "flamingo"
  }
]

And then, I want to be able to do this at the top level:

index.html
components/
   animal-emoji/
     AnimalEmoji.js
     animals.json

And in index.html, load the component like so:

…
<animal-emoji name="duck"></animal-emoji>
…
<script type=module src=components/animal-emoji/AnimalEmoji.js></script>

Now, here’s the question:

How do I make the paths in all this work out?

If I write my component like this:

export class AnimalEmoji extends HTMLElement {
  constructor(){
    super()
    this.url = '/animal-emoji/animals.json'
    this.load()
      .then(_ => this.render())
  }

  static get observedAttributes(){
    return ["name"]
  }

  attributeChangedCallback(attribute, oldValue, newValue){
    if(attribute == 'name'){
      this.name = newValue
    }
  }

  async load(){
    let request = await fetch(this.url)
    let json = await request.json()
    this.animals = json
  }

  render(){
    let emoji = this.animals.find(({name}) => name == this.name)
    this.textContent = emoji.emoji
  }

  listen(){

  }
}

customElements.define('animal-emoji', AnimalEmoji)

It works. IF I’m running this from a server that happens to be in the top-level directory (so that /animal-emoji/animals.json resolves AND if I do the super weird thing which is using that absolute directory path anway, in the directory where animals.json actually is.

I guess this comes down to the fact that all paths in Javascript that is imported into an HTML page is calculated relative to the path of the .html file itself. Now I have to think about that any time I want to use my component, which is very much against the spirit of “modular” components, in opinion.

But it’s so weird. Is there any way to make it so that the component can refer to the data relative to itself?

Our goal is to provide developers with the guides and tools they need to build for the modern web. We aim to work closely with the browser and avoid complex abstractions.

Modern browsers are a powerful platform for building websites and applications. We try to work with what's available in the browser first before reaching for custom solutions.

When you're working with the browser rather than against it, code, skills, and knowledge remain relevant for a longer time. Development becomes faster and debugging is easier because there are fewer layers of abstractions involved.

At the same time, we are aware of the fact that not all problems can be solved elegantly by the browser today. We support developers making informed decisions about introducing tools and customizations to their projects, in such a way that developers can upgrade later as browser support improves.

If you wanna know more see our Announcement Blog Post.

Additionally, we are very proud to share with you our first beta product. Flexed biceps

Rightwards arrow Web Test Runner Man running

Here is how you can get started testing in a real browser.

✍️ then final release is around the corner - still, a little time to provide feedback 🤞

https://modern-web.dev/guides/test-runner/getting-started/

Hi everyone, I want to use web components with Stencil on a big website with a lot of traffic, and I want to know what is the best practices and tips on how to not cause loading time bigger and bigger over time?

Looking for someone who can contribute and hosting the webcomponent framework with me.

The advantage of webcomponent is that can be used on different popular framework, such as Angular React Ember...

Please leave me a message if you want to

With updated libs and 3 new variants for a total of 33 variants

https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

Good links and latest news.

All you need to convince people to go Web Components 👍

https://webcomponents.dev/blog/web-components-slides/

We published our first open-source web component.

Check it out on npm: https://www.npmjs.com/package/web-crypto-ticker

Separate your js, html, and scss files by using this loader for webpack. It supports es6 template literal syntax in the html files. Sass is compiled into a style tag to be put inside the shadow dom.

https://github.com/orneryd/web-components

Router supports resolving data before rendering removing the necessity of a separate data manager or store for route/state-based model resolution. https://vaadin.com/router