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.

Sign up for GitHub

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

Jump to bottom

Web Component with Shadow Dom #284

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Web Component with Shadow Dom #284

wants to merge 1 commit into from
+27 −3

Conversation

DanielJDufour
Copy link
Contributor

@DanielJDufour DanielJDufour commented Jan 20, 2025 •
edited
Loading

⚠️ This is a draft pull request. I mostly created this to share knowledge and unblock the FMTM Web Forms integration work. I'm not sure this exact implementation is best for everyone.

Builds a Web Component version of <OdkWebForm/> without the Shadow DOM

screenshot of web component demo
Screenshot 2025-01-20 at 4 28 04 PM

I have verified this PR works in these browsers (latest versions):

  • Chrome
  • Firefox
  • Safari (macOS)
  • Safari (iOS)
  • Not applicable

What else has been done to verify that this works as intended?

Viewed minimal demo (link coming soon)

Why is this the best possible solution? Were any other approaches considered?

I'm not sure it's the best. I've tried with using the Shadow DOM but that was more complicated. I think the benefit of this solution is that it's minimal changes and can serve as a temporary implementation as a Shadow DOM - based approach is built.

How does this change affect users? Describe intentional changes to behavior and behavior that could have accidentally been affected by code changes. In other words, what are the regression risks?

By not using the shadow DOM, this approach is currently leaking styles to the global DOM. It should be noted as experimental.

Do we need any specific form for testing your changes? If so, please attach one.

What's changed

Basically built a web component version of OdkWebForm. This built on top of the previous work on web components, but passes shadowRoot: false to createCustomElement.

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jan 20, 2025

⚠️ No Changeset found

Latest commit: aa7c996

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@DanielJDufour
Copy link
Contributor Author

Here's the demo file I used for manual testing:

<html>
	<head>
		<script src="../dist-web-component/odk-web-form.js" type="module"></script>
	</head>
	<body>
		<odk-web-form form-xml="http://localhost:8080/test-data/whova_form-BvHYggiJ.xml" />
	</body>
</html>

@DanielJDufour
Copy link
Contributor Author

I think the main question before us is: should the web component version of OdkWebForms without a Shadow DOM be merged and maintained? Or should this work live in a forked version until a web component with Shadow DOM is built. I'm open to either way.

Would like to hear everyone's thoughts :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@DanielJDufour