Using Spatial Navigation Action API

[jervisfm]

Hi,

In the spatial navigation action polyfill demo (https://wicg.github.io/spatial-navigation/demo/sample/api_spatial_navigation_action.html), the demonstrated usage is explicitly setting the --spatial-navigation-action property directly on the element. Code link:

spatial-navigation/demo/sample/api_spatial_navigation_action.html

Line 87 in 226ebb0

boxes[i].style.setProperty("--spatial-navigation-action", behaviorOption.value);

The current released implementation uses element.style.getPropertyValue to read the custom property value. Link:

spatial-navigation/polyfill/spatial-navigation-polyfill.js

Line 476 in 226ebb0

return element.style.getPropertyValue(`--${varName}`).trim();

The result of this is that styles that are applied by a CSS stylesheet do not seem to be picked up and so the automatic "focus" navigation is not enabled for them.

Just wanted to ask if the intended usage for this API is directly setting the style property inline on the applicable elements and not via a CSS stylesheet?

One can imagine that using getComputedStyle as is to get the overall computed styles might be expensive and thus it's not done here.

Thanks.