Issue
I feel like the grammar police right now.
There’s nothing about <span squidex-token="{your-edit-token}"></span> that’s going to break the world-wide web.
But when I run my code through the W3C HTML validator it complains about all the squidex-token attributes everywhere. You see, according to the specification, if you put any non-standard attributes on an HTML tag it should be prepended with data- first. That’s why we see all the data-...="value" attributes everywhere. Here is some documentation. This is all according to the HTML spec (whatwg.org).
Using a jQuery dialect, I have created a workaround polyfill that works for both the HTML spec and the unpatched Embed SDK. To employ the workaround, you can use data-squidex-token="{your-edit-token}" instead of squidex-token. Then this polyfill will patch the DOM element so it contains squidex-token as required by the Embed SDK. The polyfill solution satisfies both the W3C validator and the Embed SDK, which doesn’t use the data-squidex-token attribute but only the squidex-token attribute.
The jQuery source code for this polyfill will patch the elements after the DOM is loaded, hopefully before the Embed SDK initializes:
$(document).ready(function () {
console.log('searching for all data-squidex-token attributes to insert backwards-compatible squidex-token attributes');
$('[data-squidex-token]').each(function (i, el) {
$(el).attr('squidex-token', $(el).attr('data-squidex-token'));
console.log('patched data-squidex-token with squidex-token', el);
});
});
Include this function after the jQuery script tag and before the Embed SDK script tag and you should be off to the races with standards-compliant HTML while still being able to use the Embed SDK in its current state.
Feature Request
As to the feature request, I would like to request that the Embed SDK be patched to not only look for the presence of legacy/classic squidex-token attributes but also modern/standards-compliant data-squidex-token attributes, which would align it with the current HTML specification.
Because of the workaround and lack of severity this is probably very low priority, but perhaps worthwhile to get right because the W3C checker can get quite noisy with a few of those tokens on the page. After correcting the Embed SDK code, also adjust the sample code in the documentation here to express a preference towards standards-compliant data-squidex-token attribute, such as:
<div class="posts">
@foreach (var post in Posts)
{
<div class="post" data-squidex-token={@post.EditToken}>
<h3>{post.data.title.iv}</h3>
<p>{post.data.content.iv}</p>
</div>
}
</div>
For AB-testing and backward-compatibility, you can continue looking for the existing squidex-token which means that all current code will work with no changes needed.
For A-B testing and forward-compatibility, there should be no difference if the workaround polyfill is applied or not applied once the Embed SDK is updated to accommodate this feature and both the old attribute and new attribute should work identically whichever is present in the DOM once the Embed SDK initializes. Once the Embed SDK has been patched simply remove the polyfill.