Web Components are not yet ready

web-components-are-not-ready.html

<!-- I will consider web components ready for use when this piece of HTML works -->
<!-- Here we import two different WC frameworks and mix custom input elements in a single form -->
<!-- Like regular HTML forms, we expect this form to work without writing any custom Javascript code for data plumbing -->

<!-- Some context: This will be possible in future with ElementInternals api which works in Chrome & Firefox, but not in Safari -->
<!-- See this conversation: https://twitter.com/nileshtrivedi/status/1521395909535404032 -->
<!-- Chrome team's blog post announcing ElementInternals from 2019: https://web.dev/more-capable-form-controls/ -->


<!-- Importing shoelace.style for the sl-rating element used below -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.73/dist/shoelace.js"></script>

<!-- Import Microsoft's Fluent UI for the fluent-number-field elementused below  -->
<script type="module" src="https://unpkg.com/@fluentui/web-components"></script>


<form>
  <!-- a input for star-ratings on 1-5 scale: https://shoelace.style/components/rating -->
  <sl-rating name="score"></sl-rating>
  
  <!-- a number input field: https://docs.microsoft.com/en-us/fluent-ui/web-components/components/number-field -->
  <fluent-number-field name="count" value="0">How many?: </fluent-number-field>
  
  <input type="submit" value="Submit" />
</form>