Back to web components day 2

Shadow DOM works. Now templates:

Templates are made in the body element using <template>. It is not automatically rendered.

In to the folder ‘and move on’

So to set innerHTML, you can use backtick ` instead of ‘ to form a multiline string.

Added style to the innerHTML web componenbt string. This is a way to get all the components belongings into the .js file, but apparently when I get to stencil.js there will be better ways to handle this.

Remember that moving the <style> from the html document to the component.js file’s innerHTML makes it scoped!

Remember this ? syntax:

this._infoBox.style.display = this._isVisible ? 'block' : 'none';

Styling of components in shadow DOM:

Shadow dom has its own independent styling, but slotted content is outside of the shadow DOM. This kind of styling can be used from a compoentn to style slotted content:

 ::slotted(.highlight){
                        border-bottom: 1px dotted red;
                    }

But there is a restriction with nested slotted content?

Styles from the light dom will override shadow DOM styling for projected(?) and slotted content.

Styling Components from Outside

With the tools taught in the previous lectures, you can style your web components.

But only to a certain extent!

But here’s on important thing to keep in mind: You can NOT style HTML elements you use in your component templates. These are exclusive to your component and not targetable with CSS selectors. There is one way to style them which you’ll learn about later though.

Conditional host styling

  :host(.important){
                        background-color: #ccc;
                    }

Attribute changes

attributeChangedCallback(name, oldValue, newValue){
        console.log(name, oldValue, newValue);
        if (oldValue === newValue){
            return;
        }
        if (name === 'text'){
            this._tooltipText = newValue;
        }

    }

    static get observedAttributes(){
        return['text'];
    }

    disconnectedCallback(){
        console.log('Disconnected from asshole')
    }