►
Description
Elliott Sprehn describes Web Components, a set of new technologies that will enable developers to extend the web platform in new and exciting ways. Have you ever wanted to use templates and not use a ＜script type=thing＞hack? What about making your own ? Maybe you’ve wanted to make a reusable ＜tab-strip＞ widget that you could use with any framework by including it in your project with just one line? That’s what Web Components are all about!
About CodeConf
CodeConf improves the software community by providing a forum for thought-provoking talks and forging social connections. The third installment of the CodeConf series took place in Nashville in 2015. Attendees came together to discuss open source, best practices, documentation, and community.
For more information on this year's CodeConf, go to:
https://codeconf.com/
A
B
That's
my
email
address.
If
you
have
had
a
problem
in
Chrome,
you
should
send
me
an
email
and
we
will
fix
it
because
we
care
very
passionately
about
web
developers.
I
focus
on
the
web
platform,
specifically
bringing
new
api's
like
the
Web
Audio
API.
We
saw
yesterday
and
other
crazy
things
so
that
we
can
have
like
really
amazing
stuff
like
atom.
My
slide
deck
is
made
of
HTML.
This
used
to
be
like
really
cool,
and
then
someone
went
and
built
a
whole
text
editor
and
things
like
my
slide.
B
Deck
aren't
very
cool
anymore,
so
I'm
going
to
talk
about.
Let's
how
do
we
use
the
web
today
and
in
particular
you
say
you
want
to
build
an
application
and
you
say:
I
need
a
widget
and
we're
going
to
first
talk
about
something
that
no
one
actually
does.
They
think
I
have
this
great
idea,
I'm
going
to
go
I'm
going
to
add
this
feature
to
the
browser.
B
I
need
like
a
new
drop-down
or
something
cool
and
I'm
going
to
go
actually
get
it
added
to
the
browser,
and
the
first
thing
you're
going
to
do
is
send
a
bunch
of
emails
and
then
you're
going
to
argue
and
I'm
sad
that
I
don't
have
the
like
no
DJ
s
common
thread,
because
I
would
have
been
perfect
here,
but
that's
my
life
actually
as
I
live
in
those
arguments
all
the
time,
and
no
one
actually
wants
to
do
that.
And
then
let's
say
you
get
consensus.
B
Finally,
the
browser
say
they're
going
to
do
it
well
years
we're
going
to
go
buy
before
it
actually
happens,
and
then
your
project
is
cancelled
because
it
took
you
three
years
to
add
your
drop-down,
and
so
no
one
actually
does
this.
Instead,
what
they
do
is
like
that
just
doesn't
work
you're
like
no
I'm,
not
going
even
going
to
try.
B
Instead,
you
say:
I
want
to
make
a
widget
I
need
this
new
drop-down
first
thing
you
do
is
you're
going
to
add
a
lot
of
divs
to
the
page.
There
was
a
time
in
the
web
when
we
used
to
use
like
different
kinds
of
markup,
but
if
you
like,
look
at
inside
of
most
web
apps,
it's
like
divs
all
the
way
down.
Even
the
turtles
are
gone.
It's
just
divs
and
then
you
say:
I
need
some
style
and
you're
like
okay.
B
Well,
I
have
this
really
big,
stylesheet
and
I'm,
going
to
put
more
stuff
in
the
really
big
stylesheet
and
usually
I'll
go
okay.
So
it's
now
about
five
thousand
lines.
It's
like
typical
for
an
application.
Menu
Schad,
so
I
need
some
event
listeners
and
you,
like
hook
up
a
bunch
of
random
event,
listeners
and
you're,
like
it's
probably
going
to
work,
it
might
work.
B
This
is
sort
of
how
I
feel
when
we
build
applications.
Today
you
like
take
your
computer
and
you
take
it
into
a
dark
corner
and
you
convince
it
to
do
what
you
want
and
then
you
like
hope
that
it
actually
happened,
and
we
don't
want
to
be
developing
for
the
web
to
be
like
that.
Developing
for
the
web
should
be
a
joy,
and
you
should
expect
it
to
work
when
you
write
your
code.
B
So
you
say
I'm
going
to
use
a
framework,
because
no
one
really
wants
to
write
on
like
the
bare
metal
of
the
web.
That'll
solve
my
widget
problem.
There's
probably
like
a
react
widget
for
this,
so
you
say:
okay,
we'll
use
react
for
this
application,
but
then
you
work
on
another
project
and
then
you're
using
angular
and
then
a
polymer
and
maybe
ember
and
like
some
other
framework
that
just
came
out
last
week
that
like
replaced
all
these
frameworks-
and
you
have
this
problem-
none
of
your
widgets
are
compatible
with
any
of
your
other
applications.
B
So
we
say
what
is
the
framework
that
everybody
uses?
Well,
it's
just
the
web
platform
itself.
Everyone
knows
how
to
use
an
input.
Everyone
knows
how
to
use
a
select
and
every
framework
understands
those.
So
what
if
you
could
just
build
your
own
input,
so
every
framework
could
use
one
of
those
and
that's
what
the
new
extensible
web
platform
is
about.
It's
about
bringing
the
power
of
building
applications
just
like
the
browser
does.
So
what
exactly
is
an
input?
An
input
is
a
declarative,
API,
a
JavaScript
API
and
some
special
rendering.
B
So
what
what
do
you
need
to
do
that
yourself?
So
here's
here's
an
example
of
an
input.
It's
the
number
input
with
these
cute
little
steppers
that
you'll
notice
don't
scale
when
I
scale,
the
font
size.
That's
a
chrome
bug
I'll
we
consume
in
because
we're
in
the
future
so
see
these
little
stuffers.
Where
did
they
come
from?
Because
if
you
look
in
your
browser,
there's
no
divs
in
there,
it's
just
like
an
input
and
magically
there's
these
little
steppers.
B
These
are
the
new
tools.
You
have
custom
elements,
you
have
shadow
Dom,
you
have
templates
and
you
have
imports
and
I
think
Adam
uses
about
three
of
those.
Maybe
I
don't
know
if
it
uses
templates
I,
hope
it
uses
templates
and
start
with
custom
elements.
Custom
elements
allow
you
to
register
your
own
tag
names
now,
when
you
create
your
new
widget,
you
just
define
a
tag,
and
then
you
get
these
great
callbacks.
You
get
a
callback
when
you're
inserted
into
the
document
that
allows
you
to
do
your
setup.
B
You
get
a
callback
when
you're
removed
from
the
document
that
allows
you
to
do
teardown
and
this
will
be
compatible
with
any
framework,
and
you
also
get
an
attribute
change
callback
because
the
interface
of
the
web
platform,
it's
actually
just
attributes
like
you,
set
attributes
in
your
markup
and
it
just
works.
So
the
couple
things
to
know:
first,
it
has
to
contain
a
dash
if
you
look
at
the
code
that
makes
up
Adam
you'll
see
that
there's
like
dashes
everywhere
this.
B
This
is
the
reason
why
you
need
to
put
dashes
because
it
lets
you
like
namespace
your
elements
you
like
Adam
and
editor.
It
also
has
to
inherit
from
HTML
element
or
SVG
element.
If
that's
what
you're
doing
and
you
only
get
one
per
class
fun
trivia.
All
the
heading
elements
on
the
web,
h1
to
h6
are
the
same
class.
B
They
are
all
HTML
heading
element
for
some
reason:
they
just
have
different
tag
names
and
this
is
very
confusing,
and
so
we've
decided
this
was
a
mistake
and
we've
fixed
it
for
you
when
you
are
building
your
own
widgets
and
you
get
class
affinity,
so
every
class
gets
one
type
in
so
now
you
have
your
custom
element,
but
you
need
some
kind
of
internals
to
it.
Somehow
I
need
to
add
those
little
steppers
and
that's
where
shadow
Dom
comes
in
shadow
Dom
allows
you
to
put
something
inside
your
widget.
B
But
if
you
look
inside
this
input,
type
number
you'll
see
there
really
is
a
bunch
of
dips.
In
fact,
your
browser
implements
its
widgets.
Just
like
you
would,
except
you
can't
see
them
because
they're
hidden
inside
the
widget.
So
here
you
can
see,
there's
the
little
steppers,
and
this
is
the
editor
that
I
type
into.
B
And
shadow
Dom
allows
you
to
build
this.
It
allows
you
to
fully
encapsulate
your
widget,
and
this
comes
with
an
expectation
of
it
actually
working,
because
now
your
Styles
live
inside
your
JavaScript
can
be
bundled
with
it.
You
have
like
a
private
space
to
like
put
your
elements
and
not
worry
about
jQuery,
going
down
there
and
being
like
I
know
what
this
div
is
I'm
going
to
turn
this
Dave
into
a
button
like
no,
it
is
not
a
button
and
you
like
have
to
convince
the
framework
not
to
do
those
things.
B
Shadow
Dom
has
no
accidental
access
and
that's
the
feature,
but
you
can
still
traverse
through
the
page.
You
can
crawl
down
into
the
shadow
Dom.
If
you
need
to
it's
still
very
hackable,
you
can
still
use
selectors
to
like
style
things
down
there,
but
it
has
a
principle
of
least
surprise.
Usually
when
you
write
your
code,
it
remains
very
modular.
B
Here's
a
sample
application.
This
is
sort
of
like
a
email,
client
chat,
something
or
other
about
my
presentation,
and
you
see
there's
like
a
bunch
of
widgets
in
it
and
historically,
if
you
looked
at
this
in
your
editor
for
this
application,
you'd
see
that
it
was
just
like
stuff
everywhere,
but
this
is
what
it
should
look
like
in
the
future.
You
should
see
like
really
beautiful,
declarative
markup
that
looks
exactly
like
you'd
envisioned
the
application
to
look.
B
It
has
an
application
and
a
toolbar
and
some
buttons
and
somehow
it
all
lays
out
and
it
works,
and
that's
where
shadow
DOM
has
this
composition,
feature
composition
says:
take
my
children
and
let's
place
them
somewhere
here.
The
toolbar
says:
I
accept
buttons
and
I
accept
menus
and
the
menus
go
to
one
side
and
the
buttons
go
to
the
other
side.
We
go
back
and
we
look
at
the
application.
B
We
can
see
there's
a
two
buttons
on
one
side
and
then
there's
a
little
menu
and
we
call
that
the
content
model-
and
this
is
actually
something
that
you're
familiar
with
the
select
element-
accepts
options
and
op
groups
and
magically
places
them
somewhere
and
in
fact
your
browser
implements
the
Select
element
using
the
same
technology
and
the
technology
takes
those
elements
and
then
places
them
somewhere.
You
can
see
here,
you
use
a
CSS
selector,
of
course,
because
standards
change,
that's
probably
going
to
be
slightly
different
when
it
shows
up
in
every
browser.
B
If
you
work
on
the
web,
you're,
probably
going
to
say
I
wish.
This
was
declarative.
Something
about
this
like
there's
a
lot
of
JavaScript
here,
I,
don't
know,
what's
really
going
on.
Well,
that's
okay,
because
the
template
element
will
allow
you
to
write
this
declaratively.
Who
here
is
used
a
script
element
with
like
a
type
on
it?
That
was
like
not
valid,
so
you
could
put
like
funny,
curly,
braces
and
stuff
in
there.
It's
like
lots
of
people
that
work
on
the
web.
B
Please
don't
do
that
anymore.
Instead,
you
can
use
the
template
element.
Our
threaded
HTML
parser
in
the
background,
can
parse
it
during
page
load,
it's
very
fast
and
then
later
you
can
clone
the
content
out
of
it
and
stamp
it
into
the
page,
and
this
allows
you
to
skip
inner
HTML.
It
allows
you
to
pre,
allocate
the
objects,
it's
quite
amazing
actually,
and
it's
supported
in
every
modern
browser.
Now,
even
on
iOS,
it's
great.
B
So
what's
special
there!
Well,
you
don't
these
enter
HTML,
but
there's
another
feature.
The
reason
why
we
did
crazy
hacks
with
images
is
because
they
used
to
load
things.
If
you've
ever
used
angular
you
have
to
write
ng
source.
Otherwise
it
takes
those
curly
braces
in
the
source
attribute
and
like
actually
does
a
request
to
your
server.
It's
like
the
first
bug
everyone
has
in
their
angular.
Application
is
like.
B
Why
does
my
server
serve
all
these
404s
for
curly
braces
and
the
HTML
template
element
doesn't
do
that
everything
inside
of
it
is
inert,
it
is
actually
a
template
and
finally,
we
have
a
packaging
story.
We
have
HTML
imports
and
with
HTML
imports
you
specify
a
file
and
it's
just
like
a
regular
document.
B
They
can
contain
CSS
and
JavaScript
and
markup,
and
you
can
bundle
your
entire
widget
in
there
and
then
your
users
just
have
to
import
it
and
you
can
have
a
whole
graph
of
dependencies
and
they
all
get
sucked
and
http2
allows
the
browser
to
pipeline
the
connection.
So
it's
actually
not
as
bad
as
it
seems,
and
that
seems
like
it's
a
lot
of
stuff.
It's
like
this
new
framework,
but
your
browser
sort
of
has
it,
but
it's
really
not
bad.
B
You
will
take
angular
and
you
will
use
polymer,
you
will
take
ember
and
you
will
use
polymer,
but
polymer
is
there
just
to
let
you
write
elements
just
like
your
browser
would
so
that
we
can
stop
rewriting
those
drop-down
widgets
every
time
so
do
I
have
a
demo.
Yes,
it's
actually
just
this
slide
deck,
and
if
we
go
look
at
the
slide
deck
here,
we
can
see
it's
actually
just
a
bunch
of
slide
elements
and
a
deck,
and
that's
all
my
slide.
B
Deck
is,
and
it's
very
modular,
I've
reuse
it
between
presentations,
I,
just
swap
in
and
out
the
slides
and
it
works
great
and
in
the
future,
I
might
switch
it
to
angular.
If
angular
2.0
comes
out
and
I'm
like
feeling
really
good
about
it
or
maybe
I'll
use
react
when
react
has
some
feature
that
I
want,
but
it
doesn't
really
matter
because
my
slide
deck
is
just
elements
and
as
far
as
the
framework
is
concerned,
it's
like
a
div
or
something.
B
So
when
can
we
use
this
new
technology?
Well,
it's
all
in
chrome.
Today,
Firefox
has
it
behind
a
flag
which
you
should
be
sad
about
because
they
haven't
shifted
for
you
yet,
but
the
spec
is
changing.
Hopefully
it's
going
to
ship
everywhere,
hopefully
an
edge
eventually
and
Safari,
and
then
you'll
be
able
to
use
it
everywhere,
and
this
is
really
exciting,
because
the
power
of
this
is
that
we
stopped
rewriting
these
widgets
and
then
we
have
this
really
healthy
ecosystem
of
widgets
that
you
can
reuse.
B
But
the
really
think
big
thing
here
is
we,
as
browser
vendors,
would
like
to
get
out
of
the
business
of
being
arbitrators
right
now,
you
say
I
need
like
a
date
picker
with,
and
then
you
wait
years
for
us
to
do
it
and
that's
like
not
functional,
and
instead
we
want
to
go
towards
a
path
we
actually
host
most
of
the
web
platform
like
in
github.
It's
all
web
components,
it's
implemented
using
the
same
technology.
B
We
would
have
implemented
it
in
Hadoop
in
in
C++,
but
it's
not,
and
then
you
can
just
download
that
standard
library
and
use
it
yourself.
And
then
you
don't
have
to
wait
for
us
to
add
features
to
the
web
anymore.
You
can
do
it
yourself
and
it
democratizes
this
process
right
now,
which
is
like
very
political
between
the
browser
vendors
and
is
not
necessarily
serving
everyone's
best
interests,
and
instead
you
can
drive
the
web
forward.
B
You
don't
have
to
wait
for
us
and
you
can
help
first,
if
you
see
chrome
bugs
please
file
bugs
the
URL
is
really
short.
It's
C
our
bug.
Comm
anytime,
you
see
a
chrome
bug
like
the
crash
we
saw
yesterday,
or
maybe
nobody
saw
please
file
a
bug
about
it
also
make
cool
apps
things
like
atom
are
really
important
to
us.
When
we
see
cool
applications
like
famous
or
atom
or
what
is
it.
Flipboard
has
they're
like
crazy,
rendering
engine
thing,
which
is
really
cool.
B
That's
amazing
for
us,
because
it
allows
us
to
see
like
the
limits
of
the
platform
and
we
can
like
stare
at
it
and
figure
out
how
to
make
a
platform
faster
and
better
for
you,
and
also
please
demand
better
api's.
I've
found
it's
really
fascinating
with
the
web.
You
talk
to
people
and
you
see
like
they
wrote
this
crazy
code
and
you're
like.
Why
did
you
wrote
this
crazy
code
and
they
say
because
the
web
didn't
do
what
I
wanted
and
it's
like.
B
B
Is
there
more
extensibility
coming?
Yes,
so
let's
say
we
have
this
page
historically,
what
you
would
have
done
is,
you
would
have
added
a
lot
of
divs
and
then
some
flexbox
and
then
some
more
divs
and
then
even
more
divs,
but
we'd
really
like
to
stop
doing
that
and
in
fact
we're
going
to
give
you
the
ability
to
hook
into
the
layout
system.
So
in
the
browser,
when
you
touch
offset
top
it'll,
run
your
code
and
do
a
layout
now.
B
This
doesn't
seem
too
powerful
at
first,
but
it
actually
allows
the
browser
to
batch
up
all
the
work,
and
it
also
means
that
all
of
your
components
can
operate.
You
have
this
problem
in
frameworks
now
where,
if
you
run
before
your
framework
does
its
layout,
you
get
the
wrong
answer.
So
you
have
to
like
time
yourself
really
right
and
in
the
future.
B
B
B
If
you
noticed
these
properties,
these
properties
are
CSS
variables
or
custom
properties
or
whatever
the
working
group
is
named
them
today
and
they
allow
you
to
specify
your
own
CSS
values
and
then
use
them
throughout,
and
this
is
actually
really
powerful
and
it's
coming
very
soon
to
all
browsers
and
it
allow
you,
for
example,
in
Adam
to
set
colors
and
configuration
options
like
way
in
one
file
and
they
just
get
used
everywhere
and
in
the
future,
you'll
be
able
to
build
your
own
systems
using
those
variables.
So
here's
an
example:
I
have
this
fancy
widget.
B
That
draws
something
quite
fancy
and
it
accepts
a
radius
and
a
color
in
these
custom
properties,
and
you
think
well,
I
could
do
this
already,
but
what's
really
cool
here
is
because
it's
in
the
browser
as
properties
you
can
animate
them.
So
you
can
use
CSS,
animations
or
web
animations
to
animate
the
color
and
the
radius
property
and
just
like
all
other
properties
in
the
browser,
we
will
run
the
animation.