►
From YouTube: 2021-04-26 Overview of the new Lit 2.0 - Thomas Randolph - Source Code/Code Review Office Hours
Description
Thomas goes over the recently released Lit 2.0 and the covering highlights of the launch.
Slides: https://docs.google.com/presentation/u/1/d/1VQzyDWoFu6JLEOJAKYG62duu5fP5oUYfxjTMrYBeqgc/edit
A
Cool
right
so
go
ahead.
Here
are
this
is
the
presentation
that
I
put
you?
This
is
the
personal
one
that
I
put
together
to
sort
of
summarize
the
presentation
that
google
put
together
to
summarize
the
release
of
flight.
So
this
is
we're
a
couple
summaries
deep
here,
but
yeah
I'll
show
these
slides
at
some
point,
but
I'm
not
sure
why
this
is
not
actually
full
screen,
but
I
guess
you
can
see
all
my
all
my
browser
chrome,
which
is
super
cool,
so
this
is
the
this
is
lit.
A
2.0
and
I
I
don't
know
the
the
briefest
possible
summary
lit
element
came
out
a
while
ago
to
sort
of
take
away.
The
sharp
edges
of
dealing
with
with
native
web
components
is
just
sort
of
a
with
native
web
components.
You
need
a
little
base
class
that
extends
the
native
html
element
and
lit
is
that
that
adds
life
cycle
hooks
and
all
those
sorts
of
things.
So
it's
sort
of
just
like
a
good
foundation,
so
they
release
lit
2.0,
which
is
kind
of
a
combination
of
their
base
class
element,
as
well
as
their
template.
A
Renderer
I'll
show
these
slides.
This
is
a
link
to
the
blog
post
that
I
am
summarizing
from,
which
is
also
kind
of
the
the
summary
of
the
video
release.
So
you
can
link
to
that
and
and
see
it.
So
the
kind
of
the
first
thing
that
they
wanted
to
talk
about-
and
I
want
to
present-
is
that
the
new
late
is
smaller,
so
the
templating
part
of
lit
is
10
smaller,
it's
only
2.8
kilobytes.
This
is
the
part
that
makes
the
dom
and
updates
it.
A
So
it's
kind
of
like
jsx
or
in
view
world
html,
with
the
view
directives
mixed
in.
So
it's
that
kind
of
stuff.
So
that's
ten
percent
smaller
to
point
okay,
the
base
class,
which
is
lit
element
itself,
is
20
smaller,
total
of
5.2
k,
and
that
does
actually
include
the
temperature
so
that
when
you
include
the
base
class,
it
includes
the
templating
because
you
obviously
have
a
render
function
in
your
base
class.
So
this
is
the
thing
that
extends
html.
A
So
the
better
part
they've
released
a
bunch
of
new
things
with
lit
they've
just
made
some
general
templating
improvements,
just
kind
of
cleaned
up
how
you
render
more
complex
things
like
repeating
elements
and
those
things
they've,
just
kind
of
cleaned
up
how
you
might
do
that
using
some
directives
and
stuff.
They
change
their
directive,
api
for
authors
to
use
a
class-based
api
instead
of
a
functional
based
api
which,
if
you
prefer
functional
stuff,
that
might
kind
of
be
a
negative
thing.
A
But
it
allows
them
to
do
a
lot
more
like
just
cleaning
up
how
it's
used
in
the
code
and
and
trimming
things
down.
So
the
api
may
not
be
the
best
thing
for
you
if
you
like
functional
stuff.
But
when
you
write
a
directive,
it's
it's
easier
to
to
kind
of
manipulate
on
the
on
the
code
side.
As
far
as
using
directives,
no
change
at
all
you
just
kind
of
drop
them
into
elements
and
stuff,
so
they
added
reactive
controllers.
A
So
basically
they
noticed
that
a
lot
of
people
have
a
lot
of
logic
that
they
should
that
they
need
to
share
between
components
and
reactive
controllers.
Allow
you
to
sort
of
abstract
logic
out
to
the
controller
level
and
allow
a
component
to
implement
that
controller
without
having
to
to
duplicate
the
code.
The
example
they
gave
is
just
like
a
mouse
position
controller.
Now
that
may
not
be
useful
for
everyone,
but
you
can
imagine
you
don't
need
to
repeat
the
position
of
the
mouse
in
every
single
component.
A
In
this
case
they
have
a
localization
feature
where
the
kind
of
the
standard
localization
format
xliff
is
you
can
you
can
use
it
directly
in
your
templates
and
components
and
it
will
export
all
of
your
localizations
to
these
excellent
files
to
go
out
to
translator
sites
or
tools
or
whatever?
So
so
it's
faster,
I
mentioned
earlier
that
the
base
component
is
20
faster,
the
temperatures
are
smaller
and
the
temperature
is
10
smaller.
It's
also
faster,
so
they've
not
only
decreased.
A
The
size
they've
increased
the
speed,
it's
20
faster
on
the
initial
rendering
times,
and
it's
50
faster
on
subsequent
updates,
which
is
pretty
good.
It
was
already
100
faster
than
view
and
react.
So
even
faster
error
now
is
is
a
good
good
story,
so
that's
pretty
good
and,
and
that
link
I
linked
to
is
actually
a
blog
post
from
about
two
years
ago.
A
So
the
last
one
was
server.
We
did
faster,
smaller,
smaller,
better,
faster
and
now
server
the
one
kind
of
problem
with
web
components
that
you
could
really
point
to
was
the
inability
to
do
server-side,
rendering
they
require
shadow,
dom
typically
to
get
like
the
real
power
of
the
encapsulation
and
those
sorts
of
things.
In
order
to
solve
that
problem,
they
have
been
working
on
a
number
of
specs
as
well
as
some
tooling,
and
they
now
have
the
foundation
for
ssr.
A
The
two
biggest
things
here
are
they
have
their
own
tooling
for
like
front
end
hydration,
so
like
once
the
static
stuff
comes
from
the
server,
then
you
can
rehydrate
it
on
the
front
end
and
they
have
a
spec
in
play.
That's
that
they
want
to
get
into
the
into
the
full
spec.
It
exists
in
chrome,
called
the
declarative
shadow
dom.
So
you
can
now
declare
shadow
dom
in
like
typed
html.
You
don't
have
to
have
javascript
to
spin
that
up.
A
B
A
In
labs
but
they're
using
some
like
potential
in-state,
unstable
dependencies,
and
so
that's
why
so
they're
like
they're
just
kind
of
working
on
this,
but
it
is
there
so
also
some
new
things
these.
This
isn't
like
part
of
the
library
per
se,
but
they
have
a
new
website.
Lit.Dev,
really
easy
to
remember,
really
clean.
It's
got.
It's
got
tons
of
examples
in
the
in
the
docs
in
the
playground,
whatever,
where
even
if
you're
reading
the
docs,
you
can
edit
the
code
and
see
it
live
update
on
the
website.
A
So
it's
really
cool.
There's
no
compiler,
because
this
is
all
like
browser
native
tech.
So
you
can
just
like
like
on
the
fly.
It's
changing
the
the
examples
they
have
a
new
package,
npm
install
lit
used
to
be
you
know.
If
you
wanted
the
renderer
you,
you
lit
dash
html.
If
you
want
the
component
lit
dash
element
now,
it's
just
lit.
A
You
can
import
from
the
one
package
a
new
source
home
for
the
for
the
base
package
lit
slash
lit
on
github,
and
the
org
there
that
I
put
in
parentheses,
is
the
top
level
lit
org.
But
it's
it's
mostly
just
the
lit
package
and
then,
of
course,
the
new
twitter
handle
was
built
with
lit,
also
also
here's
the
video
and
it
just
blocked
the
youtube
video.
I
haven't
actually
seen
it
presenting,
but
you
see
the
little
flash
there
as
it
tries
to
load
it.
A
A
B
A
B
A
So
they've
never
had
a
virtual
don
the
way
that
the
way
that
it's
it's
worked
is
they
use
the
html
template
element
to
read
in
the
markup
and
then
out
of
that
they
can.
They
use
tag.
Js
tag,
template
literals
to
know
which
parts
can
change
right
because
with
tag
template
literals
you
get
the
list
of
like
things
that
are
not
string
and
the
list
of
strings,
and
so
using
those
two
pieces
they
instantiate
what's
called
a
html
part
and
html.
A
I
think
they're
called
parts
they're
either
called
html
parts
or
attribute
parts.
I
believe,
and
those
really
the
two
things:
okay
and
some
of
them
can
change
and
some
of
them
don't
because
they
know
which
ones
those
are
and
then,
when
the
data
changes
they
just
go
in
and
tweak
the
things
that
can
change.
So
there's
it's
it's
kind
of
like
the
seventh
model,
where
savel
like
knows
exactly
which
piece
of
the
dom
can
change.
A
It's
just
gonna
go
update
that,
but
using
html
templates
and
all
those
things
to
to
get
the
speed
of
it.
So
so,
with
the
virtual
dom
you
are
going
to
build
your
entire
virtual.
Dom
compare
it
to
what's
in
the
dom
currently
and
then
every
node
that
has
changed
you'll
go
update
them,
but
the
problem
with
that
is,
you
have
the
number
of
javascript
that
you
have
to
compare
is
like
n,
squared
or
whatever,
because
like
every
time
you
add
a
node,
you
have
to
compare
it
twice
to
to
the
live.
A
One
yeah,
whereas
with
with
lit
element
or
or
lit
html,
really
you're
only
going
to
be
comparing
the
things
that
are
dynamic.
So
as
long
as
you
don't
add
any
new
dynamic
things,
there
are
no
new
comparisons
to
make,
because
the
stack
stuff
just
stays
still:
okay,
with
the
reactive
with
the
reactive
controllers,
you're,
just
abstracting
you're,
just
abstracting
behavior
out
of
the
component
body
itself,
to
a
to
a
piece
of
logic
that
has
access
to
the
component,
but
is
not
part
of
the
component.