buttons / github-buttons

:octocat: Unofficial github:buttons

Home Page:https://buttons.github.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Why is shadow DOM closed?

techboyg5 opened this issue · comments

I know that you use shadow DOM. That's OK.

However, the shadow DOM is closed, which means that I cannot style the buttons with the shadowRoot property in JavaScript.

The shadow DOM should be made open. This allows you to access the shadowRoot property of the buttons, and style them.

See pull request #70.

It's closed to prevent external access as you would expect. The script would fallback to <iframe> when browser does not provide native support of shadow DOM. In <iframe> mode, the behavior is the same where user would not have access to inside the <iframe>. If you really need to customize the styling, I would recommend make a fork and edit the scss rather than trying to make it hackable, which would not work under all cases.

It's closed to prevent external access as you would expect. The script would fallback to <iframe> when browser does not provide native support of shadow DOM. In <iframe> mode, the behavior is the same where user would not have access to inside the <iframe>. If you really need to customize the styling, I would recommend make a fork and edit the scss rather than trying to make it hackable, which would not work under all cases.

I understand. That's what progressive enhancement is.

Most browsers support shadow DOM, and either way I think that changing the shadow DOM to open is a good idea. People are confused about open vs. closed shadow DOM and they say always use open. mode.

And this is not about me at all. I don't even use your buttons. I'm just giving a suggestion to a repository.