Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[QUESTION] How to Style? #3

Closed
jackchoumine opened this issue Mar 6, 2022 · 2 comments
Closed

[QUESTION] How to Style? #3

jackchoumine opened this issue Mar 6, 2022 · 2 comments
Assignees
@markmead

Comments

@jackchoumine
Copy link 

-->
<head>
  <style>
    .dropdown-toggle {
      width: 100px;
      height: 100px;
      background-color: #f5f5f5;
    }
  </style>
</head>

<x-component-wrapper x-component template="dropdown" x-data="dropdown"></x-component-wrapper>
<x-component-wrapper x-component template="dropdown" x-data="dropdown"></x-component-wrapper>

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

<script type="module">
  import { default as Alpine } from 'https://cdn.skypack.dev/alpinejs'
  import alpinejsComponent from 'https://cdn.skypack.dev/alpinejs-component'
  function dropdown() {
    return {
      show: false,
      open() {
        console.log('open')
        this.show = true
        console.log(this.show)
      },
      close(event) {
        const button = this.$el.querySelector('button')
        const target = event.target
        if (this.$el.contains(target) && !button.contains(target)) {
          this.show = false
        }
      },
      get isOpen() {
        return this.show === true
      },
      content: 'Default content',
      init() {
        console.log(this.$el.parentElement)
        console.log('dropdown --- init')
      },
    }
  }
  Alpine.data('dropdown', dropdown) // 注册数据
  Alpine.plugin(alpinejsComponent) // 注册组件
  Alpine.start() // 启动组件
</script>

style does not work
@markmead markmead self-assigned this Mar 9, 2022
@markmead markmead added the bug Something isn't working label Mar 9, 2022
@markmead
Copy link
Owner

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.

@markmead markmead added wontfix This will not be worked on and removed bug Something isn't working wontfix This will not be worked on labels Mar 12, 2022
@markmead markmead assigned markmead and unassigned markmead Mar 12, 2022
@hrishikesh-k
Copy link

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.

@markmead markmead changed the title How to use style? [QUESTION] How to Style? Sep 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@markmead markmead

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hrishikesh-k @jackchoumine @markmead