styles.css

/* Element Queries External Stylesheet */

/* Scoped Style */
@element div {
  html {
    background: lime;
  }
}

/* Element Query */
@element div and (min-width: 500px) {
  :self {
    background: lime;
  }
}

/* Container Query */
@element div and (min-width: 500px) {
  :self {
    background: lime;
  }
  html {
    background: red;
  }
}

/* Multiple Selectors */
@element #example-1, #example-2 {
  :self {
    background: lime;
  }
}

/* Multiple Conditions */
@element div and (min-width: 500px) and (min-characters: 5) {
  :self {
    background: lime;
  }
}