Possible to access ancestor as a string name in templates?

[benfrain]

We have a number of components that get re-used in different areas of our app.

Each different area requires that these same components are subtly different, visually. Presently, we are manually passing some kind of 'context' down, for example:

In our 'sidebar' view we might have...

<higher-component
    .context=${"sidebar"}
>
</higher-component>

And then in the render function for that 'higher-component':

render() {
    return html`
        <nested-component
            data-context=${this.context}
        </nested-component>
    `
}

However, is there any built in means to access the ancestor tree for components? So it would be possible to do something like (pseudo code):

data-context=${component.ancesters[2]} 

To get say the 3rd ancestor up the tree of components that 'created' it? So given:

:root > page > sidebar > higher-component > nested-component

If I was in 'nested-component' here and I used that, it would render:

data-context="sidebar"

??

[augustjk]

Within the component, you can do this.getRootNode().host to get the parent, or this.getRootNode().host.getRootNode().host to get the grand parent, and use .tagName for to get the string tag name.

See https://lit.dev/playground/#gist=e3478be76bbaf8935d3a7b1c5846dcf9

[benfrain]

Thanks, think that gives us what we need!