[QUESTION] How to Style? about alpinejs-component HOT 2 CLOSED

We can also import the global stylesheet directly:

<template
  id = "foo">
  <div>
    <link
      href = "/css/bundle.css"
      rel = "stylesheet"/>
    <p
      class = "text-xl">
      Bar
    </p>
  </div>
</template>

Since a browser would typically have this file cached, it should work well. This is not a suitable approach for CSS files that are split into chunks, but can get the job done for simple static sites made with tools like Hugo.

from alpinejs-component.

Hey, @jackchoumine I've looked into this and it's a limitation with the Shadow DOM which is what I'm using for this plugin.

The best approach would be to add the <style> element within the <template> like this:

<template id="dropdown">
  <div>
    <style>
      .dropdown-toggle {
        width: 100px;
        height: 100px;
        background-color: #f5f5f5;
      }
    </style>

    <div @click="close" class="dropdown-toggle">
      <button x-on:click="open">Open</button>
      <div x-show="show" x-text="content"></div>
    </div>
  </div>
</template>

I'm not a fan of that approach but I can't recommend anything else currently, might be something to research but I've hit a dead end with it.

from alpinejs-component.