Why doesn't my attribute selector hide my custom element?

I am trying to minimise a custom element by adding an attribute to it (both minimise and maximise, actually, but minimising ought to be the simplest), but it doesn't do anything, even though the attribute is correctly added through Javascript.

I have the CSS

:host[min] {
  display: none;
}

:host {
  font-size: 1.2em;
  color: #000;
  width: 500px;
  height: 200px;
  overflow: hidden;
  position: absolute;
  float: left;
  background-color: grey;
}

Now, the element is styled with the right colours and so, but the attribute selector doesn't hide the element. What could be the problem?

Edit: :host is referring to a web component representing a window. I am using a lot of custom elements. The HTML is basically this

<link rel="stylesheet" type="text/css" href="js/components/WindowElement/window-template.css">
<border-element>
  <title-bar>
    <div id="buttoncontainer">
      <minimise-button class="button"></minimise-button>
      <maximise-button class="button"></maximise-button>
      <close-button class="button"></close-button>
    </div>
  </title-bar>
</border-element>

The attribute min is added when I click the minimise-button.