Pre-order

πŸ”“ Unlock video

Pre-order, get early bird pricing, and help shape this course.

Pre-order video course

Tags, attributes, & text

Phlex is a lightweight HTML abstraction. Understanding how it maps to the generated HTML tags, attributes, comments, and other entities is foundational to creating quality components. We’ll also cover the built-in security and language server features in Phlex that make it a joy to use Phlex in your favorite code editor.

Tags

If you dig deep into the Phlex source code, you’ll find a list of HTML tags registered as methods by Phlex. It’s why the p method corresponds to the <p> HTML tag, h1 to the <h1> HTML tag, etc.

BLah…

Attributes

In Phlex, attributes are keyword arguments passed into tag. Consider the following example:

div(class: "container", id: "main"){ "Hello"}

This will generate the following HTML:

<div class="container" id="main">Hellow</div>

πŸ”“ Unlock content

Pre-order this course to unlock this video, source code, and content. You'll also get to work with Brad to fine tune the course cirriculum.

Pre-order video course for $379 $249

Boolean attributes

β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“(type: "checkbox", checked: true)

β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“β–“ type="checkbox" checkedβ–“

β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“(type: "checkbox", checked: "true")

β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“

β–“β–“β–“β–“β–“β–“ type="checkbox" checked="true"β–“

Data attributes

β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“

β–“β–“β–“(data: { foo: "bar", baz: "qux" }){ "Hello"}

β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“

β–“β–“β–“β–“ data-foo="bar" data-baz="qux"β–“Hellowβ–“β–“β–“β–“β–“β–“

Style attributes

β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“

β–“β–“β–“(style: { color: "red", background: "blue" }){ "Hello"}

β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“

β–“β–“β–“β–“ style="color:red;background:blue;"β–“Helloβ–“β–“β–“β–“β–“β–“

β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

Text, comments, and whitespace

β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

p {
  "Copywright Acme, Inc. #{β–“β–“β–“β–“.β–“β–“β–“β–“β–“.β–“β–“β–“β–“}"
}

β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“

p {
  β–“β–“β–“β–“β–“ "Copywright"
  β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“(href: "/") { "Acme, Inc." }
  β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“
  β–“β–“β–“β–“β–“ β–“β–“β–“β–“.β–“β–“β–“β–“β–“.β–“β–“β–“β–“
}

β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

Safety and security

β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“ β–“β–“β–“β–“β–“β–“ β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“ β–“β–“β–“β–“β–“β–“β–“β–“β–“β–“

JavaScript in attributes

Blocks, slots, & yielding
Next video
Rendering
Previous video