@programingBeginnerposted at 2022-03-19

createElementで生成した要素にstyleが適用されない

Q&A

Closed

解決したいこと

vueでサイトを作っているのですが、createElementで生成した要素にstyleが適用されません。
その理由を理解したいです。よろしくお願いいたします。

該当するソースコード

<template>
  <h1 ref="titleT" class="title-t">
    <span>1</span> <!-- この元々あるspanの下に要素が作られます -->
  </h1>
</template>

<script>
  const titleT = ref<HTMLHeadingElement>();
  const arrTitleT = [..."DARSE"];

  onMounted(() => {
    for (let x = 0; x < arrTitleT.length; x++) {
          const span = document.createElement("span");
          span.textContent = arrTitleT[x];
          titleT.value?.appendChild(span);
     }
  }
</script>

<style lang="sass" scoped>
.title-t
      position: absolute
      top: 20%
      left: 10%
      font-size: 7.2rem
      letter-spacing: 0.8rem

      span
        color: red
</style>

自分で試したこと

createElementで作った要素にstyleが適用されなかったので、

1Answer

@uasi posted at 2022-03-19

スタイル以前の問題としてご質問のコードが壊れています。動かすには onMounted( に対応する ) を追加し、 <script> を

<script setup lang="ts">
import { ref, onMounted } from "vue";

に変える必要があります。動くかどうか確認してから貼るようにしてください。

ご質問についてですが、スコープ付きスタイル <style scoped> で定義したスタイルは DOM 操作で動的に追加した要素には適用されません。ディープセレクタ ::v-deep を使って

.title-t
    /* 略 */
    ::v-deep span
        color: red

と書くか、今のスタイルをスコープなしの <style> に書けば適用できます。

スコープ付きスタイルが動的に追加した要素に適用されない理由やディープセレクタについては以下のページに詳しく書いてあります。（ディープセレクタが >>> または /deep/ と書いてありますが、 sass ではどちらも使えないため代替記法 ::v-deep を使っています。意味は同じです。）

1Like

Comments

@programingBeginner
Questioner
お礼が遅くなって申し訳ありません。
回答ありがとうございます！
<script>の部分に関しては、質問に関係ないコードの部分を削った方が回答してくださりやすいだろうと思い削っていました。しかし、コードを削った旨を書くか、回答者様が書いてくださった<script>の文を書くべきでした。ご指摘ありがとうございます。
質問に関してですが、動的に追加した要素にstyleがつかない理由に、styleのscopedが
関係するのですね。scopedで指定したcssと、それに対応するHTMLにカスタムデータが付与されそれらが結び付けられる。要素を動的に生成したらそれにカスタムデータが付与されてないので、styleが適用されないということがわかりました。
ありがとうございました。

Are you sure you want to delete the question?