This udemy course stopped suddenly because of life and a noisy laptop fan. 2-3 weeks, new HP Z workstation and time to pick up the pieces. Keep track in this page.
Memories from last time: It worked as it should, I made something in the sahdow DOM and saw it in the inspector. And there was something else, can’t remember. Should probably redo Section 3, about 60 minutes. That’s what 2-3 weeks does to my memory.
Also, find the files I used. Damn.
Found files and remembered. Made a tooltip and used the shadow DOM. Plenty of stuff blown out of my head again. Have to redo this part so this is slow. Ok, let’s go kveldsmat!
Day 1 – repetition – WebComp basics
- Register own HTML tags – must have a – in name, example: <super-component>
- Shadow DOM – Separate from DOM – encapsulated
- Templates & Slots – define own html structure with flexible entry points (setStep?)
- HTML imports (discontinued)
Browser support, meh. blir bedre og det finnes polyfill
Make a new html. Make a .js Class that could extend an element like HTMLElement. Run super() in constructor. define the Class maybe like….
customElements.define('asshole-tooltip', Tooltip);WC lifecycle
Element created –> constructor() –> Basic initializations
Elements attached to SOM –> connectedCallback() –> DOM initializations
After the DOM init when you should start doing funky stuff to the component. use the connectedCallback function after super() to do appends, add event listeners(?) etc..
If the elements is detached from the DOM:
elements detached DOM –> disconnectedCallback() –> Cleanup Work
for later when we cover attributes to element:
Observed Attribute updated –> attributeChangedCallback() –> Updatte Data + DOM
Ok, right now. Events:
_showAsshole(){
}This runs after connectedCallback. eventlistener iss added inside connectedCallback
Adding shadow DOM was easypeasy, and then the global div style orange border stuff disappeareed and confirmed encapsulation, noice!