LitElement

Q&A

Only editable by group admins

  • Last updated November 25, 2019 at 7:19 PM
  • Evidence visible to group members and anyone with the link
Provide answers to the questions posed in the Badge Overview section.

All posted evidence

Answers for the lit-element badge

* What is the difference between a property and an attribute?
Attributes are defined by HTML, and all definitions inside HTML tags are attributes.  Properties belong to the DOM, and the nature of the DOM is an object in JavaScript.
* Which one would you use to pass a large complex object into the component?
You would use properties, most likely using a static get properties() function.
* Inside a component event handler, what does this refer to?
'this' refers to that instance of the element itself.
* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
Both the bubbles and composed flags need to be set to 'true'.
* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
connectedCalleback, disconnectedCallback, adoptedCallback, and attributeChangedCallback.
* list 3 ways to provide CSS styles to our Web Components
static get styles() property, exporting/importing a module with tagged styles, inline styles
* Does the CSS cascade extend beyond the Shadow Root?
No, with the exception of inherited CSS properties
* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
using inherited CSS properties, Using the custom element tag, using CSS custom properties
sdcaulley About 4 years ago

lit-element & lit-HTML Q & A

* What is the difference between a property and an attribute?
Attributes are defined by HTML, all definitions inside HTML tag are attributes. The type of attributes is always string. We can get and set properties as we do to a normal object in JavaScript and properties can be any types. Non-custom attributes have 1:1 mapping onto properties. Non-custom property (attribute) changes when corresponding attribute (property) changes in most cases. Attribute which has a default value doesn't change when corresponding property changes. It is recommended to use property in JavaScript as it's much easier and faster. 

* Which one would you use to pass a large complex object into the component?
properties

* Inside a component event handler, what does this refer to?
The component itself

* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
Both the composed and bubbles flags

* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
ConnectedCallback and disconnectedCallback

* list 3 ways to provide CSS styles to our Web Components
1. The static styles property
2. Add styles using a <style> element.
3. Add styles using an external style sheet.

* Does the CSS cascade extend beyond the Shadow Root?
No

* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
1. Use the ::slotted() CSS pseudo-element to style direct slotted children
2. U
se the :host CSS pseudo-class and :host() CSS pseudo-class function to style the component itself 
3. Use
the ::shadow CSS pseudo-element to style shadow DOM internals from outside

angelap Over 4 years ago

Answers

* What is the difference between a property and an attribute?
Properties can be of any type, attributes are always strings. An object's properties can be directly read by other objects.
* Which one would you use to pass a large complex object into the component?
The best way to pass large complex objects to components is with properties.
* Inside a component event handler, what does this refer to?
this refers to the component itself. 
* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
the event flags composed and bubbles need to be set to true
* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
connectedCallback: Invoked when a component is added to the document’s DOM.
disconnectedCallback: Invoked when a component is removed from the document’s DOM.
* list 3 ways to provide CSS styles to our Web Components
static styles property.
inline styling
external stylesheets
* Does the CSS cascade extend beyond the Shadow Root?
styles inside of a shadow DOM node don’t leak outside of the shadow root and styles from outside the shadow root don’t leak in
* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
using :host
bridgerz Over 4 years ago