Discussion on: Web component - learnings and limitations

[Danny Engelman]

| A shadow DOM is inaccessible from outer DOM

So you haven't learned yet about:

• Inheritable styles
• CSS properties
• ::part

[AK DevCraft]

Nope, but going check it out. Thank you!

[AK DevCraft]

I guess I should have mentioned it, does Shadow DOM in closed mode still allows accessing its elements from outer DOM?

const header = document.createElement('header');
const shadowRoot = header.attachShadow({mode: 'closed'});

[Danny Engelman]

it is "closed", not "close"

And all it does is prevent access to .shadowRoot, and that is all it does.

Nothing stops you (the WC Author) from exposing your component to the outside world.

[AK DevCraft]

This is really awesome, I didn't find an example this like. My requirement was to expose certain HTML element inside the web component, that now I can easily expose as a simple function. Going back to your example, I can add a function like below

getButtonEle(){
              return this.root.children[1];
          }

Thank you!