
Show HN: A &lt;chess-board&gt; HTML element for any web page or app - spankalee
Hello HN,<p>For a few months I&#x27;m been working on a fun side-project to port the (awesome) chessboardjs library to an easily reusable and embeddable web component. The quarantine has finally spurred me to put the finishing touches on it.<p>https:&#x2F;&#x2F;justinfagnani.github.io&#x2F;chessboard-element&#x2F;<p>It works in plain HTML files just by writing an HTML tag:<p><pre><code>    &lt;chess-board&gt;&lt;&#x2F;chess-board&gt;
</code></pre>
And it works in any framework because it&#x27;s just an HTML element.<p>Styling is encapsulated and customizable with CSS properties and parts:<p><pre><code>    chess-board {
      --dark-color: darkmagenta;
    }
    &#x2F;* Highlight the e2 square in red *&#x2F;
    chess-board::part(e2) {
      box-shadow: inset 0 0 3px 3px red;
    }
</code></pre>
I hope it&#x27;s useful or fun for anyone who wants to do chess things on the web. You can try it out in plain HTML here:<p>https:&#x2F;&#x2F;jsbin.com&#x2F;jajijab&#x2F;2&#x2F;edit?html,output<p>Or in a React app here:<p>https:&#x2F;&#x2F;stackblitz.com&#x2F;edit&#x2F;react-chess-board
======
zzo38computer
I would want to be able to see the FEN string and move list even if document
scripts and CSS are disabled, or if the client software does not implement
some feature it uses.

(I have now written a document about <widget> and <widgetset> elements (and
some extensions for <script> and <noscript>) which contains a specification
for how such things should be done, and the implementation could be made to
support this.)

~~~
spankalee
You can include whatever content you want inside the tag. When the component
is defined, that content won't render (the shadow root doesn't have any
<slot>s). When the component is undefined it will.

It's very similar to <script> / <noscript> in some ways.

