How to apply css style after createElement in vue component?

Question

<template>
  <div id="body">
    <button type="button" @click="create">Create</button>
  </div>
</template>
<script>
  export default {
    methods: {
      create () {
        let e = document.createElement('input');
        e.classList.add('input-test');
        e.setAttribute('type', 'text');
        e.setAttribute('value', 'test');
        document.getElementById('body').appendChild(e);
      }
    }
  }
</script>
<style scoped>
.input-test {
  color: red;
}
</style>

I tried this code. But input-test style wasn't applied. Why can't apply to element? It works when I remove scoped at style tag.

ofleaf · Accepted Answer · 2018-08-16 08:35:46Z

2

I solved by deep selectors deep selectors

answered Aug 16, 2018 at 8:35

ofleaf

6151 gold badge6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sergimbo · Accepted Answer · 2021-06-28 11:02:30Z

1

I found the solution here: https://stackoverflow.com/a/49926050/5899698

In the resulting element of createElement you can add the scoped css identifier using:

e.setAttribute(this.$options._scopeId, '');

answered Jun 28, 2021 at 11:02

sergimbo

1111 silver badge5 bronze badges

1 Comment

ofleaf Over a year ago

I've already solved it, but your answer was also very helpful. Thanks a lot.

tony19 · Accepted Answer · 2022-07-16 02:51:29Z

1

If you look how vue handles style scoping you will see that all elements get a identifier for the scope which will be added to your scoped css. Any new created element won't get transpiled by vue so it doesn't get the needed scoping identifier.

If you only want show an element when the button is clicked you should add it to the dom and only show it on click with the v-if directive

edited Jul 16, 2022 at 2:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 16, 2018 at 8:03

Sven

3674 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to apply css style after createElement in vue component?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related