Elements inside custom HTML tag aren't initialised in constructor

I need to access elements inside a custom tag I created <multi-nav>. The problem is that the constructor isn't called after initializing these elements (which is expected). In this example I can't access the form tag manifested in the object formTag.

MultiNav.js

class MultiNav extends HTMLElement { 
    get formTag() { 
        return this.getElementsByTagName("form")[0];
    }

    get selectTag() {
        return this.formTag.getElementsByTagName("select")[0];
    }

    constructor () {
        super();
        this.formTag.addEventListener('submit', function(evt) {
            evt.preventDefault(); // to avoid error, by stopping form from submitting
            console.log("submitting ...");  // doesn’t log because formTag isn’t retrieved
             this.formTag.submit();
        }); 
    }
}


window.customElements.define('multi-nav', MultiNav);

The problem is that the error is thrown after calling addEventListener, browser says: Uncaught TypeError: Cannot read property 'addEventListener' of undefined

While in the HTML file, (working only on google chrome)

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'>
</script>

<script type="text/javascript">
$(document).ready(function() { 
 $('input[name=toggle]').change(function(){
    $('#myform').submit();
});
});
</script>

<script language="javascript1.7" src="/js/MultiNav.js">

</script>
<multi-nav>
<form id='myform' action="/action_page.php" method="POST"> 
    <div>
        <label><input type="radio" name="toggle" value="20"><span>$20</span></label>
        <label><input type="radio" name="toggle" value="50"><span>$50</span></label>
        <label><input type="radio" name="toggle" value="100"><span>$100</span></label>
        <label><input type="radio" name="toggle" value="500"><span>$500</span></label>
        <label><input type="radio" name="toggle" value="1000"><span>$1000</span></label>
    </div>
    <select name="stuff" form="myform" title="category" onchange="this.form.submit()">
        <option value="category"><button selected disabled>Category<button></option>
        <option value="home"><button>Home<button></option>
        <option value="electronics"><button>Electronics<button></option>
        <option value="cars"><button>Cars<button></option>
    </select>
</form>
</multi-nav>

It should have something to do with class lifecycle in JavaScript. But I couldn't find the appropriate function

Solution

Three issues and solutions:

this.formTag is not defined because the instance of the custom tag is created before the document is loaded, and so this.getElementsByTagName("form")[0] is undefined.
Solution: place window.customElements.define('multi-nav', MultiNav); within the ready callback function.
$('#myform').submit() will submit the form without the submit event being triggered.
Solution: include an invisible submit button in your HTML, and trigger a click on it instead of calling the submit method.
```
<input type="submit" id="submitButton" style="display:none">
```
JS:
```
$('#submitButton').click();
```
Within the addEventListener callback this does not refer to your custom object, but to the element on which you call addEventListener.
Solution: replace this.formTag.submit(); by this.submit().