Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DSD Shadow dom #420

Merged
merged 4 commits into from
Sep 10, 2024
Merged

DSD Shadow dom #420

merged 4 commits into from
Sep 10, 2024

Conversation

digitalsadhu
Copy link
Member

This PR is a second attempt (after feedback) for implementing DSD wrapping for podlets.

A new constructor argument has been added

const podlet = new Podlet({
  name: 'my-podlet', // when useShadowDOM is set to true, name must be valid custom element name
  useShadowDOM: true,
});

and asset scopes can be used to place assets inside the Shadow DOM.

podlet.css({ value: '/path/to/css', scope: 'shadow-dom' });

For the base use case, thats all you need to do.

<script>(()=>{function e(d){HTMLTemplateElement.prototype.hasOwnProperty("shadowRootMode")||d.querySelectorAll("template[shadowrootmode]").forEach(o=>{let
n=o.getAttribute("shadowrootmode"),s=o.hasAttribute("shadowrootdelegatesfocus"),t=o.parentNode.attachShadow({mode:n,delegatesFocus:s});t.appendChild(o.content),o.remove(),e(t)})}var
r;(r=document.currentScript)!=null&&r.previousElementSibling&&e(document.currentScript.previousElementSibling);})();
</script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this needed any more?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the DSD polyfill, I don't think we can let go of this just yet, but I guess hopefully not too long

Copy link
Contributor

@wkillerud wkillerud left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌

@digitalsadhu digitalsadhu merged commit f4f335d into next Sep 10, 2024
7 checks passed
@digitalsadhu digitalsadhu deleted the shadow_dom branch September 10, 2024 03:43
Copy link

🎉 This PR is included in version 5.2.0-next.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

Copy link

github-actions bot commented Nov 6, 2024

🎉 This PR is included in version 5.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants