Shadowdom styling issue

child_component.css

div {
    background-color: yellow;
}

child_component.dart

@HtmlImport('child_component.html')
library com.polymertest.childcomponent;

import 'package:polymer/polymer.dart';

@CustomTag('child-component')
class ChildComponent extends PolymerElement{

    ChildComponent.created() : super.created(){

    }
}

child_component.html

<polymer-element name="child-component">
    <template>
        <link rel="stylesheet" href="child_component.css">
        Value
        <div>sdsfsdfsdfdsf</div>
    </template>
</polymer-element>

parent_component.css

div {
    background-color: red;
}

parent_component.dart

@HtmlImport('parent_component.html')
library com.polymertest.parentcomponent;

import 'package:polymer/polymer.dart';

@CustomTag('parent-component')
class ParentComponent extends PolymerElement{

    ParentComponent.created() : super.created(){
        selectedValue = new DataVO();
    }
}

parent_component.html

<polymer-element name="parent-component">
    <template>
        <link rel="stylesheet" href="parent_component.css">

        <div>
            <p>sdfsdfsf</p>
            <child-component selectedValue="{{selectedValue}}"></child-component>
        </div>
    </template>
</polymer-element>

pubspec.yaml

name: polymertest3
version: 0.0.1
description: A sample web application
dependencies:
  browser: any
  polymer: ">=0.15.1 <0.17.0"
dev_dependencies:
#  unittest: any
transformers:
- polymer:
    entry_points: web/index.html