Lightning data locker restricting Javascript for CSS/HTML

Question

I am trying to retrieve JavaScript Static resource in Community lightning component to override the numbering from Unescaped html. But the data locker service is blocking the script.

Am trying to customize CSS numbering, so I have added Custom CSS to lightning component from Static resource.But the unescaped HTML is not catching <ol start="6"><ol> instead of starting from 6,ordered list is starting from 1. So I have written the below JS to override this to start from "6" but data locker service is blocking. How can I avoid this?

I want to display my ordered list in Lightning component similar to the fiddle below

https://jsfiddle.net/stv05gph/

    var ol = document.querySelectorAll("ol");
    for (i = 0; i <= ol.length - 1; i++) {
      var index = parseInt(document.getElementsByTagName("ol")[i].getAttribute("start")) - 1;

        if (!isNaN(index)) {
            document.getElementsByTagName("ol")[i].style = "counter-reset:li " + index;
        }
    }

Answer 1

The problem is that <aura:unescapedHtml> doesn't allow you to access its content. You can achieve the same thing with a <div> and use innerHTML.

Here, I'm also starting the querySelectorAll call on the <div>, instead of calling it on document, which could return different results depending on the page.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" > 
    <ui:button label="test list" press="{!c.press}"/>
    <div aura:id="container"></div>
</aura:component>

({
    press : function(cmp, event, helper) {
        var HTML =  '<ol ><li>First</li><li>Second</li></ol><p></p><ol start="3" ><li>First</li><li>Second</li></ol><ol start="6" ><li>First</li><li>Second</li></ol>';

        var div = cmp.find('container').getElement();
        div.innerHTML = HTML;

        var ol = div.querySelectorAll("ol");
        for (var i = 0; i <= ol.length - 1; i++) {
            var index = parseInt(document.getElementsByTagName("ol")[i].getAttribute("start")) - 1;

            if (!isNaN(index)) {
                document.getElementsByTagName("ol")[i].style = "counter-reset:li " + index;
            }
        }

    }
})

Here is the result on my test org, after pressing the button:

div data-aura-rendered-by="344:0">
   <ol>
      <li>First</li>
      <li>Second</li>
   </ol>
   <p></p>
   <ol start="3" style="counter-reset: li 2;">
      <li>First</li>
      <li>Second</li>
   </ol>
   <ol start="6" style="counter-reset: li 5;">
      <li>First</li>
      <li>Second</li>
   </ol>
</div>