Let's code!

Scoped CSS

@scoped-css

·

Lvl 2

The "direct child selector" looks like > it only selects one level deep.
CSS lets you dial in what you want to affect.

Visit ✅

Scoped CSS

@scoped-css

·

Lvl 1

Add <style class="scoped"> to auto generate unique classes for your CSS.
You always know where the CSS for a component is.

Learn how!

HTML Imports

@html-imports

·

Lvl 1

Wish you could reuse HTML between pages?
Usually that means servers or frameworks - this is HTML imports.

Start using 🎈

HTML Scoped JS

@html-scoped-js

·

Lvl 1

Both document.getElementById or using element ids is no fun. No elements can have the same id - even if they a <div> or more apart - even if you know exactly which element you want. HTML Scoped JS will only search for idx under its parent element.

Reusable element ids? Yes please

CSS Animate Events

@css-animate-events

·

Lvl 1

CSS animations! If only we could animate JavaScript events like click, keypress, or mouseenter. CSS can't watch for these events, but if we could, what might it look like?

I want this 🌋

CSS Animate Events

@css-animate-events

·

Lvl 2

Hear me out, I want to animate the click event of a button, but I don't want to animate the button. Can I do that?

Yes, you can do that