How to limit the scope of a Vue.js component's style?

I am experimenting with single file .vue components and my first successful build surprised me with the scope of the component style. Generally speaking, I was under the impression that single file components would be self-contained, including the scope of their components.

The component .vue file is

<template>
    <div>
        Hello {{who}}
    </div>
</template>

<script>
module.exports =  {
    data: function () {
        return {
            who: "John"
        }
    }
}
</script>

<style>
div {
    color: white;
    background-color: blue;
}
</style>

It is built via webpackthough the following webpack.config.js

module.exports = {
    entry: './entry.js',
    output: {
        filename: 'bundle.js'
    },
    devServer: {
        inline: true
    },
    module: {
        rules: [{
            test: /\.vue$/,
            loader: 'vue-loader'
        }]
    }
}

and the entry.js

import Vue from 'vue/dist/vue.js'
import ComponentOne from './component1.vue'

//Vue.component('component-one', ComponentOne)
new Vue({
    el: "#time",
    data: {
        greetings: "bonjour"
    },
    components: { ComponentOne }
})

The HTML file binding all together is

<!DOCTYPE html>
<html lang="en">
    <body>
        Greetings:
        <div id="time">
            {{greetings}}
            <component-one></component-one>
        </div>  
        <script src='bundle.js'></script>
    </body>
</html>

The rendered result is

The style definitions from component-one for div are also applied to the parent div (with id=time). Is this expected behaviour? Shouldn't the styling be confined to the component?

Note: I can assign an id to the div in my component's template and would therefore contain the styling - my question is about why this behaviour is expected in the context of components self-containement.