abelljs/abell

Scope Styles and Scripts

Closed this issue · 11 comments

saurabhdaware commented

Is your feature request related to a problem? Please describe.
Current styles and scripts in Abell Components are not scoped. We need a way to scope them to a particuar component

Describe the solution you'd like

<style scoped>
  a { color: #f30; }
</style>

This style will be only applied to the anchor tags of that particular component

pantharshit00 commented

I will try to give this a shot if you are not already onto it :)

Let me know.

saurabhdaware commented

yes yes sure go ahead

pantharshit00 commented

I will like to have scoped behaviour by default on components. It doesn't make sense for me to a component to mutate the global script. Let me know if you have any thoughts against it.

Proposed solution:

<AbellComponent>
<template>
  <footer>
    &#169; <a href="https://abelljs.org/">Abell</a> <span id="footer-year"></span>
  </footer>
</template>
<!-- scoped styles --> 
<style>
  footer {
    text-align: right;
    padding: 40px 100px;
  }

  @media (max-width: 768px) {
    footer {
      padding: 20px 20px;
    }
  }
</style>
<!--- scoped scripts. will only load if component is in the page --> 
<script>
  document.querySelector('#footer-year').innerText = new Date().getFullYear();
</script>

<!-- global styles --> 
<style global>
  html {
   display: 'block';
  }
</style>

<!-- global script -->
<script global>
  console.log(window.location)
</script>
</AbellComponent>
saurabhdaware commented

This totally makes sense!

we can't really break the existing behavior till v1.0.0 though so if we implement this early, we can either keep temporary scoped attribute or hide it under feature flag.

But yes eventually in v1.0.0 this is totally how it is supposed to work

pantharshit00 commented

Hm you already support <style scoped> ? Or you are talking about the current behaviour of <style> being global. I will assume the later.

Also, I thought you are not following semver like most projects until hitting v1.0,0

In my personal opinion, following semver at this stage of project can limit scope of development iteration.

saurabhdaware commented

Yup, I was not following semver till v0.4.0 but the issue is, people avoid using the project if we tell them that it may break so I wasn't really getting enough reviews. If we follow semver, people will use it and give reviews so that when we put out v1.0.0 it will be the version that people want to use and not something we want to build.

Hm you already support <style scoped> ? Or you are talking about the current behaviour of <style> being global. I will assume the later.

Yup I was talking about style being global right now

saurabhdaware commented

Though If we build a breaking change, We can have a next branch and publish over next tag

pantharshit00 commented

Ok sure, yes this will be a breaking change.

saurabhdaware commented

Lets keep this open for scoped scripts

saurabhdaware commented

I'll close this and open a separate issue for scoped scripts since it will be unrelated to scoped styles