Skip to content

Web Component with Shadow Dom#284

Draft
DanielJDufour wants to merge 1 commit intogetodk:mainfrom
DanielJDufour:feature/web-forms-web-component
Draft

Web Component with Shadow Dom#284
DanielJDufour wants to merge 1 commit intogetodk:mainfrom
DanielJDufour:feature/web-forms-web-component

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.

@DanielJDufour
updated vue and added web component build to dist-web-component/odk-w…
aa7c996 
…eb-form.js

Signed-off-by: Daniel J. Dufour <daniel.j.dufour@gmail.com>
@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

DanielJDufour commented Jan 20, 2025

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

DanielJDufour commented Jan 20, 2025

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 :-)

@spwoodcock
Copy link

spwoodcock commented Jan 23, 2025

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 :-)

I think for now we can work on a fork and embed the component from that (for us to get moving for now)

In the long term, we can discuss the approach with the web-forms team & decide on what type of PR would be preferable👍

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.

2 participants

@DanielJDufour @spwoodcock