DEV Community: Vernes Pendić

Stimulus MultiSelect

Vernes Pendić — Tue, 22 Nov 2022 15:54:39 +0000

The problem

Every developer had to struggle with choosing the right plugin/package for things that are time consuming or have already been done in ways that suit their needs. Juggling 🤹‍♂️ between a package that is smaller in size or has certain features that we need can be frustrating.

But what happens when there are no packages to choose from? On top of that, what if there is a feature that millions of developers need, but struggle to find answers or make custom solutions for every app they make.

I am, of course, talking about the atrocious implementation of the multiple select feature built into every major browser 😫

The solution

Since this frustrated my colleagues and me for a long time we decided to make our own implementation and open source it.

We are not pioneers in this, naturally. There is many a plugin trying to solve the same problem. But what stuck with me when researching is none of them seem to quite scratch the perfectionist itch (now always a good thing 😅). Some of them require big dependencies like vue.js or jQuery, while some of them just lack the features or the ability to be customized.

Stimulus Multiselect

You are going to need stimulus.js as a dependency for this package to work. It is a minimal, easy to understand javascript flavor for handling HTML.

If you are using a js bundler with node_modules support (such as esbuild, rollup.js or Webpack) install the package from npm:

yarn add @wizardhealth/stimulus-multiselect

If you're using importmap-rails, you'll need to pin @wizardhealth/stimulus-multiselect:

./bin/importmap pin @wizardhealth/stimulus-multiselect

Usage

Load your stimulus application as usual and the register the multiselect
controller with it:

import { Application } from '@hotwired/stimulus'
import { Multiselect } from '@wizardhealth/stimulus-multiselect'

const application = Application.start()
application.register('multiselect', Multiselect)

The multiselect has many modes of working. You can fetch data remotely or load a static json collection of items. An example of this static approach:

<div data-controller="multiselect" data-multiselect-items-value='[{ "value": "cuckoo", "text": "Cuckoo 🐦"}, { "value": "macaw", "text": "Macaw 🦜"}, { "value": "rooster", "text": "Rooster 🐓"}]' data-placeholder="Search for birds...">
  <select multiple="multiple" class="multiselect__hidden" data-multiselect-target="hidden" name="form[test_ids][]" id="form_test_ids"></select>
</div>

Let's build an app

We are gonna build a Rails app (since Stimulus is mostly used with Rails) that has a backend of different sports. We are gonna search through these sports with the help of the multiselect and return the results back to show in the dropdown.

The setup

Create a new app rails new multiselect_test
Scaffold Sports so we can search through them rails g scaffold Sport name:string
Migrate it! rails db:migrate
Start up the server rails s and get to creating some sports
Add the package yarn add @wizardhealth/stimulus-multiselect

The implementation

We are going to use the sports#index page for testing. So we need to make the following changes to the controller and view.

We are going to make use of a simple where for the purposes of this example. The index needs to like like this. The parameter that contains the search term from the select input is inside params[:q]

# app/controllers/sports_controller.rb

def index
  @sports = Sport.where("name LIKE ?", "%#{params[:q]}%")

  respond_to do |format|
    format.json
    format.html
  end
end

The response that the select needs is JSON. So let's change the json response views that are inside app/views/sports/

# app/views/sports/index.json.jbuilder

json.array! @sports, partial: "sports/sport", as: :sport

The select needs a json that contains the value (usually the id) and the text value (what is shown when selecting)

# app/views/sports/_sport.json.jbuilder

json.value sport.id
json.text sport.name

Lastly, we need to put the select HTML somewhere. Let's use the sports/index.html.erb for this

<!-- app/views/sports/index.html.erb -->

<div data-controller="multiselect" data-multiselect-search-url-value="/sports" data-placeholder="Search for sports...">
  <select multiple="multiple" class="multiselect__hidden" data-multiselect-target="hidden" name="sports[]" id="sport_ids"></select>
</div

Add the contents of this file to your css

/* app/assets/stylesheets/application.css */

// The css contents from the file mention above go HERE

When going to localhost:3000/sports we should see this

The end product

Now just search any sport you like:

Why Stimulus Multiselect ❓

Easy to set up
Lightweight
Good documentation
Lot of options for loading data and handling selected items
Design is customizable (css file is extracted so you can make the select suit your application look)
Accessible
Contributions and issue raising are welcome on our GitHub page

The finish line 🔚

Would love to know what you think. Comment, review the code, try the select and tell us how we can improve 💚

Rails snack - Upgrade to Ruby 3

Vernes Pendić — Thu, 31 Mar 2022 09:02:58 +0000

There are a couple of posts I found online for the upgrade of Ruby to version 3. Very few of them mentioning Rails and its issues during the upgrade.

My versions prior to the upgrade:

rails -v
Rails 7.0.2.3

ruby -v
2.7.5

gem list
sidekiq (6.2.2)

I'm mentioning sidekiq since it is the most commonly used background processing for Rails (and I had problems when updating 😅).

The two problems I had (not mentioned anywhere):

1. ActionCable.server.broadcast
This one went under the radar but without this change ActionCable won't work. Rails contributors fixed the issue but here it is for everyone

2. Sidekiq (and gems connected to it)
I had to upgrade sidekiq to the newest version because of the issue of log clutter. Specifically, this deprecation message. This has since been fixed (so update sidekiq). But not all gems connected to sidekiq have since caught up (sidekiq-statistic, sidekiq-cron... to mention a few). This is very annoying, especially for anyone using foreman, makes the logs unreadable. So keep an eye for updates if you are using any of these.

Would love for anyone who did the update to contribute with a comment below. Add any problems you had that were not mentioned anywhere so we can help as many people as possible in one place ❤️

Effortlessly install TailwindCss in a Rails app with Webpack (minimum configuration)

Vernes Pendić — Sun, 22 Aug 2021 14:26:28 +0000

A while back DHH decided to created a gem for easily installing TailwindCss into rails apps 🙌🏻. This gem could be used to install Tailwind through the asset pipeline as well as using webpack. This changed later on as contributors wanted to focus their attention to what was the heart of the gem 🥺.

Well, since a lot of people used this gem to get a new Rails app going with Tailwind without the hassle of configuring everything from scratch (including colleagues from my company), we decided to create a new gem 🎉. This gem installs Tailwind with Webpack and has production purging enabled. Other Webpack specific problems are to be addressed as well.

Tailwind CSS

Vernes Pendić — Mon, 02 Dec 2019 14:49:36 +0000

Introduction

When creating a new website within a tiny amount of time or with a small development team most people look towards Bootstrap to help with the design. Taking into account the ease of use, an abundance of documentation and plenty of predefined css components it is not a mystery why Bootstrap is so popular.

However, when the project gets bigger and more users start using the application concerns of page load and developer performance arise. While using Bootstrap it is very unlikely that all available utility classes are going to be used resulting in a considerable amount of css bloat as well as unused components. Enter Tailwind.

Tailwind is a CSS framework for rapid-fire UI development. When mentioning CSS frameworks first thing that comes to mind is Bootstrap, Material Design or even Bulma. However, even though Tailwind is considered a framework it doesn't fit under the same philosophy as the others. Tailwind is primarily a utility 🛠 framework or rather a utility bundle.

Tailwind doesn't provide a default theme or any predefined UI components. Also, with Tailwind, it is rather unlikely to get two similarly looking pages. This is due to there being no imposed design decisions (like with vanilla css, the limit is our imagination).

Tailwind provides tools for rapid development 🏃🏼‍♀️💨, while at the same time allowing the developer to maintain identity. Even though there is no limit to imagination with Tailwind, designing is structured in a way so that the developer can make a self-imposed ruleset to avoid css bloat or repeated properties (i.e. making 10 colors that all look similar).

There are three main approaches when CSS and UI design is in question. Every one of them has pros and cons shown below:

The table above has an error in the Utility frameworks column. The error is that it suggests that the Utility frameworks have "Little Control" which is not true in the case of Tailwind because inside it everything is configurable.

Utility classes

When taking into account that the main goal of Tailwind is not providing users predefined components but tools for rapid component development it is clear why we won't find a ".btn" class like in Bootstrap. Instead, we will find utility classes. All predefined utility classes can be found in the official documentation and in the configurable javascript file tailwind.config.js in the root of the project after installation. Every available class can be configured for individual purposes or the purposes of a larger project. An example of styling a button using tailwind:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="flex h-screen justify-center items-center">
      <button type="button" class="bg-green-500 p-3 border-2 outline-none border-black rounded">
        Adam
      </button>
    </div>
  </body>
</html>

vs Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
      <button type="button" class="btn btn-primary">Adam</button>
    </div>
  </body>
</html>

Output:

Tailwind CSS	Bootstrap

Using Bootstrap a predefined button design is achieved. To achieve a custom look we need to write custom css. While using utility classes it is possible to achieve any look and feel of the button without writing any css.

This is important for reasons below:

There won't be 10 different colors that look the same
The application will have a uniform look (i.e. same padding for lists or containers)
The ability to create a personal UI design, identity, branding without writing a bunch of custom CSS (we don't have to be CSS experts)
Speed 🏎🏎🏎💨💨💨

Utility first 🥇

In the above example of the button, there is a large number of added classes in order to achieve the wanted look. One of the reasons for this is the recommended way of creating components, and that is the utility first method. In short, this means:

Add an appropriate HTML element
Add appropriate utility classes
Profit 💰?

This method achieves the main goal of Tailwind: Rapid UI development. This means making the UI components look as intended without adding any custom styling. Of course, sometimes it is inevitable to write CSS, but with this approach, it is reduced to a minimum.

Looking at the above mentioned button example:

<button type="button" class="bg-green-500 p-3 border-2 outline-none border-black rounded">
  Adam
</button>

One thing that immediately sticks out is the number of classes needed to create this button. Sometimes it looks unreadable and seems like clutter. This is a problem when taken into account real scenarios in which there might be multiple buttons or other repeating components on the same page.

Extracting components

Extracting components is a process of extracting utility classes into new, clearly defined and readable classes. Two things give meaning to this process:

The problem of bloating HTML with utility classes
Separation of concerns or reusable components

Again, when looking at the above mention button, there is no need to extract the utility classes into a new class if we are looking at the button as a single occurring component. However, if we look at the button in the context of a bigger project which will certainly have more than one similarly or identically looking button then copying a large number of utility classes seems like an unnecessary obstacle. Besides, if there is a need to change the style of a certain UI component that is repeated it would be a major problem.

How to extract utility classes? Tailwind gives us a very useful function for this: "@apply". In the example below we have the CSS for the same button as above but with extracted classes:

<button type="button" class="btn-wizard">Adam</button>

<style>
  .btn-wizard {
    @apply bg-green-500 p-3 border-2 outline-none border-black rounded;
  }
</style>

The output:

As you can see the output is the same as before, but the HTML is cleaner and more readable. The .btn-wizard class can now be used multiple times across the website.

Responsiveness

Every Tailwind utility class has its responsive behaviour. This allows for effortless creation of responsive components without writing additional CSS. Tailwind provides a simple method of putting already existing utility classes into a responsive context. Using the prefix {screen}:{class}. If we look at the above example of the button and want to change its color depending on the screen size (i.e. if it is a monitor, laptop or mobile screen) we have to add the following:

<button type="button" class="bg-green-500 sm:bg-red-500 p-3 border-2 outline-none border-black rounded">
  Dagi
</button>

We will get the appropriate output.

Tailwind responsiveness implies that the page is going to be created for mobile screens first. Adding the sm:bg-red-500 tells the background of the element changes to red if the size of the screen is larger than the predefined value (which is configurable). If the size of the screen is smaller than the size which the "sm:" represents the colors of the background go back to the default, in this case, green.

There are a couple of predefined screen size options in Tailwind:

Flexbox

When comparing the responsiveness of Tailwind and Bootstrap there is one convenience lacking in Tailwind. That's the Grid functionality that we are so used to with Bootstrap. Tailwind doesn't come with predefined grid classes but provides the tools to achieve the same thing using Flexbox (additional resource) and Tailwind width utility. An example of a grid using a combination of flexbox and tailwind:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="flex h-64">
      <div class="w-1/2 bg-grey-500"></div>
      <div class="w-1/2 bg-pink-500"></div>
    </div>
    <div class="h-16"></div>
    <div class="flex h-64">
      <div class="w-1/3 bg-grey-500"></div>
      <div class="w-1/3 bg-pink-500"></div>
      <div class="w-1/3 bg-grey-500"></div>
    </div>
  </body>
</html>

Output:

The divs above are completely responsive. It is possible to create an endless amount of columns while Bootstraps grid is limited to 12.

Elements inside the div that have display: flex; follow the x or y-axis for direction (x is the default). This means that the direction of elements inside the flex div can be changed by adding a simple "flex-col" class. This changes the above example to look like this:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="flex h-64">
      <div class="w-1/2 bg-grey-500"></div>
      <div class="w-1/2 bg-pink-500"></div>
    </div>
    <div class="h-16"></div>
    <div class="flex flex-col">
      <div class="p-6 bg-grey-500"></div>
      <div class="p-6 bg-pink-500"></div>
      <div class="p-6 bg-grey-500"></div>
    </div>
  </body>
</html>

Output:

Configurability

One of the biggest strengths of Tailwind is its configurability. In the center of every Tailwind project is the tailwind.config.js JavaScript file located in the root of the project (by default). It contains all the configurable utility classes and colors. This file doesn't exist unless the user opts to generate it. If there is no config file the utility classes are the same as mentioned in the official documentation.

By default, Tailwind provides a very useful configuration with predefined values to start with. These values are fully configurable and are not required to be used. The documentation, as well as the creator of Tailwind, encourages changing the default values to fit the individual design needs.

Note: Unlike other CSS frameworks, the Tailwind configuration is not co-dependent. This means that any utility class can be deleted without affecting the rest of the configuration.

The configuration file is divided into parts depending on the CSS options it affects. The example bellow shows how a set of utility classes looks for the height property and how to use it inside HTML:

 /*
  |-----------------------------------------------------------------------------
  | Height                                  https://tailwindcss.com/docs/height
  |-----------------------------------------------------------------------------
  |
  | Here is where you define your height utility sizes. These can be
  | percentage based, pixels, rems, or any other units. By default
  | we provide a sensible rem based numeric scale plus some other
  | common use-cases. You can, of course, modify these values as
  | needed.
  |
  | Class name: .h-{size}
  | CSS property: height
  |
  */

  height: {
    'auto': 'auto',
    'px': '1px',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
    '5': '1.25rem',
    '6': '1.5rem',
    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    '24': '6rem',
    '32': '8rem',
    '48': '12rem',
    '64': '16rem',
    'full': '100%',
    'screen': '100vh',
  },

On top of the configuration for the height property there is a short example of how to use the utility. In order to set the height to '4rem' inside HTML we will add the "h-16" class to the element. If inside the configuration we don't have the desired value, lets say '1.75rem' we can add it and name it however we please. Following the already set pattern it would make sense to call this value '7', but you can use whatever you want:

 /*
  |-----------------------------------------------------------------------------
  | Height                                  https://tailwindcss.com/docs/height
  |-----------------------------------------------------------------------------
  |
  | Here is where you define your height utility sizes. These can be
  | percentage based, pixels, rems, or any other units. By default
  | we provide a sensible rem based numeric scale plus some other
  | common use-cases. You can, of course, modify these values as
  | needed.
  |
  | Class name: .h-{size}
  | CSS property: height
  |
  */

  height: {
    'auto': 'auto',
    'px': '1px',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
    '5': '1.25rem',
    '6': '1.5rem',

    '7': '1.75rem', //<------This was added

    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    '24': '6rem',
    '32': '8rem',
    '48': '12rem',
    '64': '16rem',
    'full': '100%',
    'screen': '100vh',
  },

On top of the configuration file there is a colour section. It doesn't affect the generated CSS, but provides a way of centralising all colours without the need for a separate file containing only colours. The colours can be used with every utility with which it makes sense to use them:

    colors: {
 |       transparent: 'transparent',
 | 
 |       black: '#000',
 |       white: '#fff',
 | 
 |       gray: {
 |         100: '#f7fafc',
 |         200: '#edf2f7',
 |         300: '#e2e8f0',
 |         400: '#cbd5e0',
 |         500: '#a0aec0',
 |         600: '#718096',
 |         700: '#4a5568',
 |         800: '#2d3748',
 |         900: '#1a202c',
 |       },
 |       red: {
 |         100: '#fff5f5',
 |         200: '#fed7d7',
 |         300: '#feb2b2',
 |         400: '#fc8181',
 |         500: '#f56565',
 |         600: '#e53e3e',
 |         700: '#c53030',
 |         800: '#9b2c2c',
 |         900: '#742a2a',
 |       },
 |       orange: {
 |         100: '#fffaf0',
 |         200: '#feebc8',
 |         300: '#fbd38d',
 |         400: '#f6ad55',
 |         500: '#ed8936',
 |         600: '#dd6b20',

 ...

Again, looking at the button we created, if we want to change its colour to be a bit darker we can use one of the following colours:

<button type="button" class="bg-red-700 p-3 border-2 outline-none border-black rounded">
  Adam
</button>

Summary

It is simple, professionally made, well documented and worth your try. It certainly made my workflow faster, made my UI more uniform and reduced the amount of CSS I wrote over the course of using it. None of my web pages using Tailwind look the same. Additionally, the creator of Tailwind is an experienced guy in the industry and is continuously improving Tailwind. He also wrote a useful book for anyone interested in design (highly recommend!).

NOTE: This post applies to the current version of Tailwind which at the time of writing is v.1.1.2.

Reference:

Web components

Vernes Pendić — Fri, 08 Nov 2019 11:07:00 +0000

Introduction

Web components are one of the most useful, built-in, standardized (W3C), browser features added recently. Even though it certainly is all those things it's still not widely used. As such not all browser vendors have taken advantage of all of its capabilities (list of browsers that support the specification) but with the help of polyfills, their use can be extended on the majority of browsers.

Web components contain 4 sub-specifications that describe the available possibilities regarding DOM element manipulation. The first two, Custom elements and Shadow DOM, are more important and we'll talk about them further.

Custom elements ⚙️

Custom elements give the ability to create a new or extending an already available HTML element.

Custom elements: Creating a new element

Creating a new element is described as defining a completely new HTML tag which will be added to the page like every other HTML element we already know and use: <div></div> <a></a> <my-element></my-element>

The Pure Javascript method

The Pure Javascript approach implies defining the structure, design, and behavior of the custom element using only modern javascript. A short example of how this would look for a simple sentence element:

class VpSentence extends HTMLElement {
  constructor() {
    super();
    console.log("The sentence is connected!");
  }

  connectedCallback() {
    this.innerHTML = `
      <span>wants a Space Silver mac</span>
    `;
  }
}

window.customElements.define("vp-sentence", VpSentence);

If we have a simple index.html which looks like this:

And then we add our custom component like this:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="vp_sentence_component.js"></script>
  </head>
  <body>
    <div style="padding-left: 100px; padding-top: 100px">
      <span>Adam</span>
      <vp-sentence></vp-sentence>
    </div>
  </body>
</html>

We'll get the following index.html output:

Note: When templating is done inside Javascript it's necessary to use ES2015 template literals which are done using the grave accent also known as the backtick. Also, the name of the component needs to have a dash in its name ("my-element", "vp-sentence") so the browser can recognize that is is a custom component. A good practice is adding a prefix like your or your companies initials (vp = Vernes Pendić).

Custom elements: extending built-in elements

Extending built-in elements means adding new or customizing default behavior or properties of an already existing element such as div, anchor, span, etc. An example of how to change the default behavior of the tag adding the "is" attribute:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }

      .container span {
        margin-right: 5px;
      }
    </style>
    <script>
      class CustomSpan extends HTMLSpanElement {
        connectedCallback() {
          this.style.color = "red";
        }
      }
      window.customElements.define("red-span", CustomSpan, { extends: "span" });
    </script>
  </head>
  <body>
    <div class="container">
      <span is="red-span">Adam</span>
    </div>
  </body>
</html>

The output we get:

Defining custom behavior of built-in elements doesn't differentiate much from creating new custom elements but it's application does. While new custom elements are being used as independent units that can be used anywhere with a specific purpose, custom built-in elements extend functionality to already available browser elements.

Shadow DOM 👻

Shadow DOM represents some kind of encapsulation. The purpose of adding a shadow on an element is the "protection" of the styling, structure, and behavior of already existing application code, as well as preventing application-defined rules of affecting the shadow element. The shadow can be attached to an already existing tag (example below) as well as in combination with web components (example). An example of attaching a shadow on an element:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }

      .container span {
        margin-right: 10px;
        color: red;
      }

      span {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div><span>Adam</span></div>
      <div id="shadow"></div>
    </div>
    <script>
      let $div = document.querySelector("#shadow");
      $div.attachShadow({ mode: "open" });
      $div.shadowRoot.innerHTML = `
        <style>
          span {
            color: blue;
          }
        </style>
        <span>Adam</span>
      `;
    </script>
  </body>
</html>

The output:

Usually, when defining CSS like above we would expect all span elements text on the page to be red but the shadow prevents it in this case. The definition of new classes inside the shadow DOM will not affect other elements on the page that are not encapsulated with the shadow (and vice versa). This means that classes with the same names can exist inside and outside the shadow with their styling not mixing or causing any conflicts.

This is very important in combination with custom elements. If a custom element is being shared across multiple projects or is provided as a plugin where naming conventions can't be followed (the latter is the main use-case of the shadow DOM).

Additional functionalities: Attributes

One way to send data to web components is accomplished by using attributes. Useful for allowing the consumer some flexibility while at the same time preventing the need for source code changes (an example would be changing the background theme of an element).

An edited example of the vp-sentence custom component:

class VpSentence extends HTMLElement {
  constructor() {
    super();
    console.log("The sentence is connected!");
    this._color = null;
  }

  connectedCallback() {
    this.innerHTML = `
      <p>wants a Space Silver Mac</p>
    `;
    this._setColor(this.getAttribute("color"));
  }

  _setColor(value) {
    this.style.color = value;
  }
}

window.customElements.define("vp-sentence", VpSentence);

HTML:

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }

      .container span {
        margin-right: 10px;
        color: red;
      }

      span {
        color: red;
      }
    </style>
    <script src="vp_sentence_component.js" ></script>
  </head>
  <body>
    <div class="container">
      <div><span>Adam</span></div>
      <vp-sentence color="blue"></vp-sentence>
    </div>
  </body>
</html>

Output:

If the color attribute is set to the color blue after page refresh we will get the above output. If the need for changing the theme without refreshing the page is required there is a solution. Adding the observedAttributes() method and naming all the attributes which need to be tracked for live changes. Furthermore, it is required to add one of the available callbacks: attributeChangedCallback(name, oldValue, newValue)

In order to refresh the value of color:

class VpSentence extends HTMLElement {
  constructor() {
    super();
    console.log("The sentence is connected!");
    this._color = null;
  }

  connectedCallback() {
    this.innerHTML = `
      <p>wants a Space Silver Mac</p>
    `;
    this._setColor(this.getAttribute("color"));
  }

  _setColor(value) {
    this.style.color = value;
  }

  static get observedAttributes() {
    return ["color"];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this._setColor(newValue);
  }
}

window.customElements.define("vp-sentence", VpSentence);

Additional functionalities: Properties

Another way of sending data to web components are properties. Aside from that it is possible to receive data from components. Properties are in fact advanced attributes in that it is possible to only send data in string format through attributes while using properties it is possible to send arrays and objects. This is accomplished using getters and setters:

class VpComponents extends HTMLElement {
  constructor() {
    super();
    this._data = null;
  }

  set data(data) {
    if (this._data === data) return;
    this._data = data;
    //refresh();
  } 

  get data() {
    return this._data;
  }
}

window.customElements.define("vp-component", VpComponent);

In this context, data can be anything and inside the refresh(); you can do anything depending on the expected data format.

This is my first post here so don't refrain from adding any suggestions to formating or any rules I broke. 🙏🏻

Reference links: