►
From YouTube: The Web Components Framework - Open Source Friday
Description
Eleventy's newest plugin enables developers to write single file components to include web components, templates, and shadow DOM in our sites.
Join us on Friday, January 20, 2023, at 1 pm ET as Zach Leatherman shows us how to use WebC.
A
A
A
B
A
B
A
A
Love
to
see
it
I
would
love
to
see
more
companies
go
ahead
and
like
sponsor
open
source.
Well,
I,
don't
know
if
that's
the
word,
if
it's
sponsor
support,
whatever
higher
hire
them
in
and
help
them
bring
in
more
money,
I
would
love
to
so
I
know
this
isn't
even
on
the
agenda
but,
like
I
didn't
realize
you've
been
coding
since
2006.
A
B
Yeah
I
mean
there's
been
a
lot
of
changes,
but
I
mean
at
the
same
time
not
very
much
has
changed
if
you
sort
of
live
at
10
000
feet
above
it
I
think
yeah
when
I
was
sort
of
coming
up
or
when
I
started.
The
biggest
component
library
was
the
Yahoo
user
interface
Library
and
Yahoo
was
like
a
huge
like
contributor
to
the
front
end
space,
and
you
don't
really
see
so
much
from
them
anymore.
But
yeah
I
mean
it's.
It's
not
change
very
much.
B
B
It's
probably
in
that
similar
category
I
think
the
JavaScript
ecosystem
has
probably
changed
quite
a
bit
in
terms
of
like
the
bundler
tools
that
are
available
on
them:
sort
of
investment,
that's
flowing
into
the
that
tooling
space
and
the
single
page
applications
versus
multiple
page
application
stuff,
but
yeah,
there's
kind
of
been
a
few
different
big
sort
of
epochs.
If
you
will
or
eras
of
front
end
that
have
lived
through.
A
A
Wow
yeah,
that
is
so
awesome,
that's
awesome
and
I.
Think
I.
Think
your
perspective
is
interesting.
Like
you're
saying
it
kind
of
didn't
change
like
the
fundamentals.
Didn't
really
change
that
much,
but
we
do
have
like,
maybe
better
tooling
and
JavaScript,
or
not,
sometimes
not
better,
but
additional
Tooling
in
JavaScript
to
to
make
things
easier
for
us.
I
see
a
couple
people
in
the
chat
like
bakar,
you
want
to
say
hi
to
bakari
and
a
few
others
thanks
for
tuning
in.
Why
don't
y'all
type
in
the
comment?
A
B
B
I
was
originally
on
WordPress
when
I
first
started
my
blog
I,
think
back
in
2006
or
seven
and
then
I
went
to
Jekyll
I,
think
in
maybe
2012
and
and
I
wanted
something
in
the
JavaScript
space,
because
I'm
a
JavaScript
JavaScript
is
in
my
wheelhouse
or
I'm
a
front
front
of
the
front.
End
I
had
no
JavaScript
I
knew
JavaScript
more
than
Ruby
and
I
was
familiar
with
Ruby
a
little
bit,
but
yeah
I
was
really
interested
in
node.js,
so
I
wanted
a
Jekyll
for
node.js.
B
A
B
No
I,
don't
think
so.
I
think
it
was
maybe
the
first
one
that
borrowed
a
lot
of
jekyll's
conventions
in
terms
of
like
file,
system,
routing
and
things
like
that,
or
at
least
borrowed
it
heavily.
As
a
pre-bundled
like
out
of
the
box,
zero
config
setup
but
yeah,
there
was
a
fair
number
of
site
generators
that
existed
before
11d
in
the
node.js
space,
but
not
really
ones
that
had
as
much
overlap
with
with
Jekyll
as
as
I
wanted,
gotcha.
B
Yeah,
so
websy
is
kind
of
this
new
template
Syntax
for
it
for
any
project.
It
can
exist
independent
of
11d.
It's
an
independent
template,
syntax
from
11d,
but
we
do
also
provide
an
11d
integration
for
an
110
plug-in
for
it,
and
it
really
is
a
way
to
server
render
HTML
using
conventions
that
are
borrowed
from
web
component
standards.
So
yeah,
it's
kind
of
just
a
new
templating
syntax
that
lets
you
build
components
in
HTML.
B
A
A
Gotcha
and
then
is
that
lady
Deb
said
what
problem
does
it
solve
for
I?
Think
you
kind
of
answered
that,
but
maybe
we
could
break
it
down.
Even
smaller
I
have
a
question
here
that
says
like
what
are
web
components.
Explain
it
to
like
your
grandma
or
your
five-year-old
or
someone
who's,
never
touched
11d
or
web
components
before
or
something
like
that.
So
yeah.
B
So
it
it
is
a
number
of
different
things.
I
think
maybe
the
biggest
one
that
people
identify
with
web
components
is
the
custom
element
specification,
which
is
just
a
way
to
have
inner
ad
interactivity
to
HTML
components
and
yeah.
We
kind
of
adopt
that
in
web
c
as
well
and
I'll
probably
go
through,
maybe
a
demo
of
that
shortly,
but
I
mean
really
when
it
comes
down
to
it.
B
I
think
the
unique
thing
that
webc
offers
that
maybe
some
other
JavaScript
framework
component
implementations,
don't
so
just
as
an
example
like
a
react
component.
For
example,
websy
is
written
in
HTML,
so
it
uses
an
HTML
parser
and
it
requires
no
client-side
JavaScript
to
operate
so
it
can
just
output
raw
HTML,
but
website
does
have
some
nice
bundling
features
built
into
it
as
well.
So
nice
things
for
CSS
and
JavaScript,
which
I
hope
to
get
into
in
the
demo
a
little
later.
A
All
right,
I,
honestly
think
if
you're
ready,
we
can
actually
transition
into
to
the
demo.
I
I've
heard
a
lot
about
it
from
when
we
were
in
the
Twitter
space
and
now
and
I
also
read
the
blog
post
and
in
my
head
I
kept
telling
myself
I'm
gonna,
try
it
out.
I'm
gonna,
try
it
out,
but
I
didn't
get
a
chance,
so
I
would
love
to
see
it
in
action
whenever
you're
ready
to
to
share
your
screen.
In
the
meantime,
I'll
look
at
some
of
the
comments
we
got.
Fuzzy
said:
hey,
it's
Zach.
B
B
B
B
B
Yeah
so
I
think
the
the
two
maybe
Flagship
features
that
are
in
the
new
2.0
beta
are
our
new
Dev
server.
So
it's
a
much
lighter
implementation
to
replace
our
previous
browser.
Sync
dependency.
It
really
like
shrunk,
our
node
modules
file
weight
by
almost
80
percent,
so
we're
like
20
of
what
we
were
in
the
last
version,
which
is
kind
of
nuts
but
yeah,
and
then
the
other
big
one
is
better
incremental
builds.
B
And
I'm
just
going
to
copy
the
configuration
straight
from
the
11d
webc
documentation
here.
If
you
go
out
to
the
11d
documentation
on
the
left
panel,
there's
a
template
language
section
and
we
just
have
a
web
c
section
here
and
then
there's
an
installation
you
can
click
through
and
that
will
sort
of
go
through
the
steps
that
I've
done
so
far
so
I
just
pasted
the
configuration
into
my
configuration
file
and
I
mean
really
all
you
need
to
get
started
with
website.
I've
now
started
the
resume.
B
B
There's
this
warning
that
comes
up
and
that's
a
bug
with
the
beta,
but
it
doesn't
actually
affect
anything
so
we're
just
gonna
roll
with
that,
but
yeah.
So
we
have
the
local
dubster,
Dev
server,
running
and
kind
of
the
interesting
thing
about
11d.
Is
that
it's
it's
very
lightweight.
If
you
run
it
on
an
empty
project,
it
processes,
zero
files,
it
does
nothing
so
to
get
started.
We
have
to
create
a
new
website,
template
and
I'll.
Do
that,
just
by
making
index.webc.
A
B
You
can
see
when
I
save,
that
it
writes
a
file
to
my
output
folder,
and
that
was
this
is
kind
of
the
basics
of
11d
as
a
static
site
generator.
It
looks
for
any
input
files
inside
of
your
project
and
builds
them
to
an
output
folder,
and
you
can
specify
that
to
be
whatever
you
want,
but
by
default
it's
underscore
site
and
then
it
serves
it
through
our
web
server.
B
So
if
we
go
back
here
and
refresh
our
our
browser,
you
can
see
that
obviously
it's
a
white
screen
because
there's
nothing
in
this
file
but
yeah
it's
serving
from
our
web
server.
So
I'll
just
put
some
HTML
boilerplate
in
here
and
maybe
put
a
hello
and
you
can
see
that
it
rebuilds
and
refreshes
a
web
server
gotcha.
B
So
that
is,
we
have
a
this
is
a
website
page.
Basically,
all
you
need
to
get
going
with
websy
because
it
is
HTML
as
its
origin.
Webc
is
HTML,
so
yeah
I
mean
that's,
maybe
sort
of
an
interesting
thing
to
it,
especially
if
you're
coming
from
a
react
background,
because
I
feel
like
with
react.
A
lot
of
people
get
confused
about
the
class
name,
class
attribute,
mapping,
attributes
versus
properties
thing
and
everything
in
webc
is
just
HTML,
it's
parsed
with
HTML
and
it
outputs
html2,
so
yeah
there's
a
very
like
standard
one-to-one.
B
B
B
B
Yeah
so
I
think
what
I,
what
I
want
to
do
if
I
have
enough
time
is
just
to
build
this
sort
of
quintessential
button
counter
component
and
I
do
think
it
kind
of
highlights
a
couple
of
different,
unique
features
of
website
that
I
think
are
kind
of
cool,
so
inside
of
the
websy
plugin
by
default,
we
have
this
convention
of
an
underscore
components.
Folder,
and
now
you
can.
B
You
can
map
this
to
whatever
folder
name
you
want,
but
if
we
find
any
webc
files
inside
of
this
underscore
components,
folder
we'll
map
those
to
be
components
you
you
can
reuse
throughout
your
content.
So
what
I'm
going
to
do
is
create
a
mycounter.webc
file
which
will
make
a
counter
component
and
I'm
just
going
to
say
this
is
a
counter.
Maybe
the
interesting
thing
too
folks
coming
from
other
JavaScript
Frameworks.
This
doesn't
need
any
HTML
doesn't
need
a
tag.
B
A
B
And
so
that
makes
four
buttons,
since
we
have
four
instances
of
our
component
over
here
and
then,
if
we
want
to
style
those.
As
an
example,
let's
see
has
built-in
sort
of
asset
bundling
for
you,
so
if
it
finds
any
CSS
inside
of
your
component,
it
will
actually
bundle
that
up
to
something
you
can
use
on
your
page.
If
you
wanted
to
do
like
a
a
style
sheet,
that
only
has
the
css4
components
used
on
the
page
and
I'll
show
how
to
do
that
as
well.
B
B
Inside
of
our
style,
we'll
see
that
the
CSS
for
our
counter
has
now
declared
here
now.
Of
course,
it
didn't
make
the
buttons
bigger,
because
the
button
doesn't
inherit
the
font
size
of
its
parent.
But
you
can
see
that
inside
of
our
body,
we
have
my
counter
four
times
we
have
the
button
inside
and
then
the
CSS
is
applied
here.
So
it
makes
those
buttons
bigger.
A
B
B
And
so
perhaps,
interestingly,
like
people
that
are
familiar
with
spell,
might
know
where
this
is
going
because
I
think
sveld
does
something
similar,
but
it
generates
a
class
name
based
on
the
content
of
the
CSS
and
the
component.
So
when
you
have
even
though
I
have
four
different
instances
of
this,
my
counter
on
my
page,
it
really
only
has
one
instance
showing
up
in
our
CSS
bundle,
so
yeah
and
it
reuses
that
same
class
name,
because
all
of
these
instances
have
the
same
CSS.
B
A
B
Yeah,
so
another
thing
you
can
do,
that's
kind
of
neat
to
11d
is
or
excuse
me
unique
to
webc
is
that
we
have
a
new
ID
property.
Now,
when
you
put
a
colon
in
from
your
properties
in
front
of
your
attributes,
excuse
me
that
makes
it
a
property,
which
means
we'll
use
JavaScript
to
sort
of
interpret
that
and
folks
that
are
familiar
with
view.
Single
file
components
will
probably
understand
this
convention,
but
we
provide
a
uid
property.
A
B
B
So
if
I
wanted
to
do
like
accessibility
mapping,
so
if
I
want
to
do
like
an
aria
mapping
between
a
specific
component,
but
only
for
one
instance
of
that
component,
I
could
use
this
and
it
would
handle
it
for
me
automatically
yeah.
You
can
do
it,
maybe
I'm
more
like
an
easier
use
case
to
understand,
as
the
html4
like,
if
you
put
a
4
on
a
label
to
map
it
to
another
form
element.
B
B
A
A
B
Okay,
great,
the
other
thing
I
wanted
to
add,
is
just
the
final
thing
to
show
how
to
add
client-side
interactivity
to
the
page.
So
what
I'm
gonna
do
is
just
change
this
to
the
text
here
to
just
be
a
one,
because
we're
just
gonna
just
for
Simplicity
we're
going
to
increment
the
button
value
that
shows
up
in
or
the
text
of
the
button
that
shows
up
inside,
and
we
can
do
that
using
the
custom
elements
API
that
I
mentioned
before.
B
It
isn't
anything
special
at
the
web
c,
it
isn't
anything
special
to
11d.
This
is
just
built
into
the
platform,
so
I
have
a
class
here,
and
this
is
I'll
add
a
connected
callback,
which
is
callback
that
runs
when
a
component
is
connected
to
the
page
and
then
what
I'm
going
to
do
is
find
the
button,
which
is
query,
something
there
and
then
I'm
going
to
add
an
event
listener.
B
Round
one
maybe
I
can
do
yep,
that's
fine,
okay
and
then
so
what
this?
What
webc
does,
as
I
mentioned,
with
JavaScript
or
with
CSS?
It
finds
any
JavaScript
used
in
your
bundles
as
well,
and
then
you
can
output
that
in
your
in
your
layout,
wherever
you
want
as
well.
So
what
I'm
going
to
go
back
to
do
is
go
into
my
11d
layout
file
and
I'll
change
and
I'll
add
another
one
for
JavaScript,
so
any
JavaScript,
that's
used
on
the
page.
Oh.
A
B
B
Oh,
you
can
see
on
my
script
on
the
page
when
I'm
actually
going
to
go
back
here,
Down
Changes
to
type
module
just
to
make
it
scoped
correctly
and
run
in
the
correct
order,
but
so
inside
my
script,
type
module
is
all
the
JavaScript
in
used
in
webc
components
on
this
page,
and
this
binds
to
my
to
the
my
counter
elements
for
me
automatically
as
part
of
the
platform
and
I
can
increment
those
and
they
all
have
independent
values.
Oh
because
each
instance
is
its
own
thing.
Yeah.
B
The
cool
thing
about
this
is
that
there's
no
Library
JavaScript
or
there's
no
Library
client-side
JavaScript.
That
needs
to
be
loaded,
we're
not
extending
from
anything
web
C
related
on
the
client.
All
the
web
c
stuff
happens
on
the
server
and
all
the
clients
that
JavaScript
we
wrote
is
just
client-side
JavaScript,
that's
inside
of
our
webc
component,
and
you
can
see
the
the
four
mapping
clicks
as
well,
because
it's
mapped
with
that
uid.
B
So
yeah,
that's
kind
of
the
crash
course
and
11d
to
build
like
that
quintessential
like
number
incrementer
and
I,
think
it's
kind
of
cool,
because
there's
just
no.
The
only
JavaScript
on
the
page
is
the
is
the
platform
JavaScript
that
is
yeah
used
to
find
a
stand.
A
web
standard
provided
by
the
platform.
There's
no
library
that
you
need
to
load
or
extend
no.
A
A
If
you,
okay,
cool
cool,
so
I'm,
going
to
remove
your
screen
share
and
then
I
start
a
few
few
questions
so
to
I'll
start
with,
like
the
people
just
being
like
wow,
this
is
so
cool.
So
it's
that
lady
death
said
wait.
What
and
I
think
that
was
when
you
just
you,
just
put
the
free
form
like
content
in
there
without
like
actually
having
any
tags.
Someone
said
this
is
or
X
Destro
said.
This
is
so
sick,
I
love
that
11d
can
use
webcs
templating
with
or
without
assets.
A
A
A
B
Yeah
I
mean
all
the
clients
said
or
excuse
me
all
the
component
code
is
generated
on
the
server,
so
you
can
have
as
many
components
as
you
want
and
we
actually
even
has
have
a
feature
that
I
wanted
to
go
into,
but
I
didn't
think
I
had
time
where
you
can
load
webc
components
directly
from
your
node
modules
folder.
So
what
11
is
going
to
do
is
start,
and
we've
already
done
this
with
our
syntax
highlighter
component,
but
actually,
if
I
could
I
can
show
you
on
the
docs
real
quick.
Do
it?
B
A
B
A
B
Yeah,
we
don't
have
any
out
of
the
box
Integrations,
but
again
website
is
just
HTML,
so
anything
you
can
do
on
HTML.
You
can
do
with
with
Tailwind
or
lit
I
want
to
have
some
good
examples
about
how
to
I
mean
you
can
just
reuse
your
Tailwind
classes
directly
in
web
c.
There
shouldn't
be
any
problem
with
that,
but
I
do
want
to
have
some
more
examples
about
how
to
generate
lit
components
with
webc
I
think
that
would
be
a
cool
integration.
A
B
So
that's
true
that
we
don't
ship
any
sort
of
code
generation
for
you
for
that
sort
of
custom
element
definition
and
maybe
we'll
we
will
moving
forward
but
I
think
that
might
be
a
leaky,
abstraction
I,
don't
know.
I'd
have
to
I
think
we
probably
have
to
have
some
hard
discussions
about
whether
or
not
that
would
be
a
good
abstraction
to
have.
But.
A
B
Yeah
I
mean
11
is
one
of
the
110's
unique
features
that
we
have
like
this
data
Cascade
feature
that
really
allows
you
to
set
data
in
a
whole
bunch
of
different
places.
There
are
no
mechanisms
right
now
to
automatically
import
data
to
the
client.
So
if
you
want
to
serialize
some
Json
inside
of
a
website
a
web
c
component,
you
could
certainly
do
that.
There's
nothing
stopping
you
from
doing
that
and
you
could
even
do
it
in
a
script
tag
and
then
it
would
bundle
to
the
client
the
same
way
we've
already
sent.
B
But
there
are
no
automated
mechanisms
to
do
that
for
you
right
now,
because
I
really
think
that
having
a
a
library,
independent
sort
of
separation
between
the
server
and
the
client,
it's
it's
probably
an
important
thing
for
performance
moving
forward,
but
we
might
add
some
utilities
to
make
that
nicer
in
the
future.
If
enough
people
make
noise
about
it,
nice.
A
And
I'll
just
ask
two
more
questions
and
that
from
the
audience
and
then
we
can
move
on
to
the
next
segment.
Someone
said
I
hope,
I'm,
not
making
you
repeat
yourself,
but
I
just
want
to
make
sure
people's
answers.
Get
I
mean
questions.
Get
answered.
Can
I
use
rub
C
component
in
11d
without
explicitly
reusing
its
style
every
time.
I
think
that's
a
good
question.
A
B
A
B
Yeah
I
see
what
you
mean
so
I
think
one
of
the
big
complaints
about
Shadow
Dom
in
particular
and
Shadow
Dom,
is
like
a
maybe
a
more
advanced
feature
of
web
components
that
I
we
haven't
gone
into.
We
can
and
webc
sort
of
exists
before
Shadow
Dom.
We
work
with
Shadow
Dom,
if
you're
using
it
but
I.
Think
one
of
the
big
complaints
with
Shadow
Dom
historically
has
been
the
accessibility
concerns
of
Shadow
Dom
content
and
because
webc
sort
of
exists
as
a
pre-compiler.
For
that
stuff.
B
A
I
hope
I
hope
we,
we
interpreted
it
right,
but
yeah
cool
all
right,
oh
I,
just
have
a
few
more
questions
for
you,
I
hope,
I'm,
not
exhausting
you
all
the
questions
but
like
one
of
one
of
my
questions
were
like
who
who
was
Prince
particularly
or
specifically,
do
you
think
this
would
benefit
which
type
of
developer
or
what
type
of
like
goals?
Will
this
developer
have
for
their
particular
project?.
B
B
The
web
is
a
huge
tent.
There's
a
ton
of
people
trying
to
get
into
web
development
right
now
and
I.
Don't
think
necessarily
the
best
way
to
get
into
web
development
is
through
JavaScript.
First
I
think
the
best
way
to
get
into
web
development
is
HTML
and
CSS
first,
and
that's
really
the
space
that
11d
tries
to
live
in
and
I
think
webc
tries
to
live
in
that
same
space
as
well.
I
really
want
it
to
be
as
easy
as
possible
for
folks
to
use
components
without
having
to
go
all
in
on
JavaScript.
A
Yes,
I
love
that
no
you're
completely
right
I
do
think
this
for
beginner
developers
and
front-end
developers.
I
have
had
some
conversations
with
people
that
said,
they
prefer
to
start
with,
like
back
end
over
front
end
like
when
they
learn
to
code.
But
for
me
it
was
really
like
instant
gratification
of
like
I
wrote,
a
HTML
thing.
It
pops
up
and
I'm
not
like
in
the
console
of
being
like
what.
What
is
this?
A
A
B
A
B
Think
about
it,
what
you
liked,
what
you
didn't
like
and
yeah
that
could
really
influence
the
library
moving
forward
because
yeah,
it's
really
early
stages
for
sure
we
just
came
out
within
a
couple
months
ago,
so
yeah
we're
still
iterating
still
getting
feedback
from
folks
and
trying
to
ship
new
features
on
it.
So
yeah,
just
trying
it
out
I
think
is
the
most
helpful
thing,
but
I
would
also
love
a
star
on
GitHub.
If
anybody
has
any
extra
spare
stars
that
they
want
to
give
away
for
the
11d
project,
that
would
be
awesome.
B
A
B
A
A
It's
a
nice
thing
to
do.
If
you
can't
contribute
code
or
money,
a
star
is
nice.
Oh,
do
you
have
and
then
my
last
question
for
you
is
like
do
you
have
any
advice
for
folks
who
would
like
to
gain
more
contribute
like
you've
done
a
great
job
at
like
gaining
contributors
gaining
like
sponsors
and
and
like
General
clout
and
like
just
nullify
being
able
to
to
be
like
you
know
what
we're
willing
to
like,
where
we
want
you
to
be
part
of
the
netlify
Community.
A
B
A
A
B
A
A
B
Oh
man,
okay,
so
I'll
admit
that
maybe
this
might
be
the
hardest
question.
If
you
had
to
answer
so
far,
I.
Don't
necessarily
think
that
I'm,
like
maybe
the
biggest
Super
Fan
of
Beyonce,
but
I,
will
say
that
I
do
like
the
Single
Ladies
song
If.
If
nothing
else
for
the
dance
choreography,
it's
like
iconic
come
on.
You
gotta!
Do
this
sorry,
man,
that's.
A
A
really
good
one
and
that's
a
fun
song
all
right.
Thank
you
so
much
Zach
for
coming
on
and
joining
us
I
hope.
I
didn't
take
up
too
much
of
your
time.
We
might
have
ran
a
little
bit
over,
but
I
really
appreciate
it.
I
think
everyone
who's
tuning
in
really
appreciated
it
too.
I
also
want
to
thank
the
the
people
who
watched
us.
Thanks
for
your
comments
and
your
engagement
and
your
kind
words,
it's
really
encouraging
and.