css-doodle

Create

Selector

:doodle

The <css-doodle> element itself. Top-level rules go to the cells, so :doodle is how you reach the host element and style the component as a whole.

Syntax

  • :doodle { }, :doodle(<selector>) { }
  • :doodle.dark:hover { }

The parentheses take any compound selector, which is matched against the element. :doodle.dark:hover is shorthand for :doodle(.dark:hover). Rules for :doodle are generated once, not once per cell.

Examples

:doodle {
  @grid: 5 / 60vmin;
  outline: 4px solid #000;
  border-radius: 8px;
}
background: #000;
margin: 25%;
Open in playground

The rules end up on the host element, so a page stylesheet can override them: 

<css-doodle id="selector-doodle-example">
  :doodle {
    @grid: 1 / 60vmin;
    background: #e6437d;
  }
</css-doodle>
<style>
  #selector-doodle-example {
    background: linear-gradient(#e6437d, #000);
  }
</style>
:doodle { @grid: 1 / 60vmin; background: #e6437d; }

Cells cannot see the hover state of the host, but they can read custom properties set on it: 

:doodle {
  @grid: 5 / 60vmin;
  --s: 0;
  gap: 1px;
}
:doodle(:hover) {
  --s: 1;
}

--offset: calc(var(--s) * 100%);
transform: translateY(var(--offset));
transition: .5s cubic-bezier(.175, .885, .32, 1.275);
transition-delay: @r(500ms);
background: #000;

@cell(i < 8) {
  @content: @pn([hoverme]);
  color: #fff;
}
Open in playground

::before and ::after on the host, written as :doodle::after or nested with &: 

:doodle {
  @grid: 1 / 60vmin;
  position: relative;
  &::before {
    content: 'hello';
    position: absolute;
    inset: 25%;
    color: #000;
  }
}
:doodle::after {
  content: 'world';
  position: absolute;
  inset: 65%;
  color: #000;
}
Open in playground

Styling the parts from outside

The grid and the cells live in the shadow DOM, but they expose part names, so a page stylesheet can reach them with ::part(): 

css-doodle::part(grid) {
  outline: 1px solid #e6437d;
}
css-doodle::part(cell) {
  outline: 1px dashed #000;
}

See also