<toggle-button> Custom Element query

Hi All,
         I am trying to use a Custom Element based on the 1st example in
the following article by Leonie Watson:
https://www.24a11y.com/2019/web-components-and-the-aom/

Only difference being i want also change/toggle text too i.e. Play <->
Pause as the state changes

Please find the all 3 variants i intend to use it in:

https://codepen.io/ahnafcodes/pen/mdJrPOd

Please let me know let me know if I am violating any thing.

*Note: *This will not work in Safari or IE11. I plan to use a
https://github.com/WebReflection/heresy to make it work in Safari and make
it simpler

Thanks
Ashraf Mohammad