<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<template>
    <style>:host([green]) { color: green }</style>
    <slot></slot>
</template>
<div>
    <div></div>
    <div green>This text should be green</div>
</div>
<script>
description("Don't share style between two hosts with different attribute matching for :host([])");

var template = document.querySelector("template");

var roots = document.querySelectorAll("div > div");
for (var i = 0; i < roots.length; i++)
    roots[i].attachShadow({mode: 'open'}).appendChild(document.importNode(template.content, true));

shouldBe("getComputedStyle(roots[1]).color", "'rgb(0, 128, 0)'");
</script>