Vue.jsのコンポーネント下部分に影をつける方法が教えてください。

Question

laravelとVue.jsを使って簡単なページを作成しております。
そこでheader（headerコンポーネント）の下に影を入れたいのですができません。
試したことは、下記です。

CSS
    template {
        box-shadow: 6px 6px black;

もしくは

    container {
        box-shadow: 6px 6px black;

わかる方がいましたらご教授ください。
よろしくお願いします。

Answer 1

「headerコンポーネント」が最終的にHTML側に<header>タグが出力されるなら

header {
  box-shadow: 6px 6px black;
}

<div class="header">などの形で出力されるなら以下 ```CSS header { box-shadow: 6px 6px black; } ```

のようにCSS側に指定をする必要があります。

---

ちなみに以下のCSSセレクタだと、<template>、<container>タグが、HTMLの出力時に存在することになってしまいます。<template>はともかく、<container>は存在しません。

template {
    box-shadow: 6px 6px black;
}
container {
    box-shadow: 6px 6px black;
}

Comments

[LEOLEO3]

解決できました！ありがとうございます！

Answer 2

vueのヘッダーコンポーネントがあるという認識になりますが
下記のようにtemplateタグの次に来るタグにクラス名なり、idを振り
ヘッダーコンポーネント内にcssを書くのでできませんでしょうか

一度お試しいただけると幸いです

<template>
    <div class="header">
        ヘッダー
    </div>
</template>
<style scoped>
.header{
 box-shadow: 6px 6px black;
}
</style>