Skip to content
Snippets Groups Projects
Select Git revision
  • 2feba3ffb6d16bc0ccfc334454a81774e0dff94f
  • master default protected
  • 0.5.9
  • 0.5.8
  • 0.5.7
  • 0.5.6
  • 0.5.5
  • 0.5.4
  • 0.5.3
  • 0.5.2
  • 0.5.1
  • 0.5.0
  • 0.4.17
  • 0.4.16
  • 0.4.15
  • 0.4.14
  • 0.4.13
  • 0.4.12
  • 0.4.11
  • 0.4.10
  • 0.4.9
  • 0.4.8
22 results

cut.go

Blame
    • Monster_DOM.CustomElement.html 63.85 KiB 
    <!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Adding meta -->
    
    
    <meta name="author" content="schukai GmbH" />
    
    <meta name="description" content="javascript library for optimal use on fast and flexible pages." />
    
    

    <!-- Adding external script-->
    
    
    <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous" ></script>
    
    <script src="https://monsterjs.org/js/doc/monster-versions.js" crossorigin="anonymous" ></script>
    
    

    <!-- Adding external style-->
    
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha256-djO3wMl9GeaC/u6K+ic4Uj/LKhRUSlUFcsruzS7v5ms=" crossorigin="anonymous" />
    
    

    <!-- Adding scripts-->
    

    <!-- Adding style-->
    

    <!-- Adding overlay script-->
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.13.0/js/OverlayScrollbars.min.js"
      integrity="sha512-5R3ngaUdvyhXkQkIqTf/k+Noq3phjmrqlUQyQYbgfI34Mzcx7vLIIYTy/K1VMHkL33T709kfh5y6R9Xy/Cbt7Q=="
      crossorigin="anonymous"></script>
    

    <!-- Adding overlay style-->
    


    <title>
      CustomElement
    </title>

    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/third-party/ionicons.min.css">
    <link type="text/css" rel="stylesheet" href="styles/third-party/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/reset.css">
    <link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-base.css">
    <link type="text/css" rel="stylesheet" href="styles/clean-jsdoc-theme-light.css">
    
    <svg aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    style="display:none">
    <defs>
        <symbol id="copy-icon" viewbox="0 0 488.3 488.3">
            <g>
                <path
                    d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124    C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124    c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z" />
                <path
                        d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227    c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6    V38.6C439.65,17.3,422.35,0,401.05,0z" />
            </g>
        </symbol>
        <symbol id='search-icon' viewBox="0 0 512 512">
            <g>
                <g>
                    <path
                        d="M225.474,0C101.151,0,0,101.151,0,225.474c0,124.33,101.151,225.474,225.474,225.474    c124.33,0,225.474-101.144,225.474-225.474C450.948,101.151,349.804,0,225.474,0z M225.474,409.323    c-101.373,0-183.848-82.475-183.848-183.848S124.101,41.626,225.474,41.626s183.848,82.475,183.848,183.848    S326.847,409.323,225.474,409.323z" />
                </g>
            </g>
            <g>
                <g>
                    <path
                        d="M505.902,476.472L386.574,357.144c-8.131-8.131-21.299-8.131-29.43,0c-8.131,8.124-8.131,21.306,0,29.43l119.328,119.328    c4.065,4.065,9.387,6.098,14.715,6.098c5.321,0,10.649-2.033,14.715-6.098C514.033,497.778,514.033,484.596,505.902,476.472z" />
                </g>
            </g>
        </symbol>
        <symbol id="down-icon" viewBox="0 0 16 16">
            <path 
                fill-rule="evenodd" 
                clip-rule="evenodd" 
                d="M12.7803 6.21967C13.0732 6.51256 13.0732 6.98744 12.7803 7.28033L8.53033 11.5303C8.23744 11.8232 7.76256 11.8232 7.46967 11.5303L3.21967 7.28033C2.92678 6.98744 2.92678 6.51256 3.21967 6.21967C3.51256 5.92678 3.98744 5.92678 4.28033 6.21967L8 9.93934L11.7197 6.21967C12.0126 5.92678 12.4874 5.92678 12.7803 6.21967Z"
            >
            </path>
        </symbol>
    </defs>
</svg>
  </head>

  <body>

    <nav class="navbar" id="navbar">
      <div class="navbar-heading" id="navbar-heading"><a href="index.html"><h2 class="navbar-heading-text">Monster</h2></a></div><div class="sidebar-main-content" id="sidebar-main-content"><div class="accordion collapsed" id="7405993" > <h3 class="accordion-heading">Tutorials<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="tutorial-tutorial.html">Monster - Build fantastic websites!</a></li></ul> </div><div class="accordion collapsed" id="9902410" > <h3 class="accordion-heading">Classes<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=9788282><div class="accordion-heading child"><a href="Monster.Namespace.html">Namespace</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster.Namespace.html#getNamespace">getNamespace</a></li><li data-type='method'><a href="Monster.Namespace.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=9971143><div class="accordion-heading child"><a href="Monster_Constraints.AbstractConstraint.html">AbstractConstraint</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.AbstractConstraint.html#isValid">isValid</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Constraints.AbstractOperator.html">AbstractOperator</a></li><li class="accordion collapsed child" id=5301464><div class="accordion-heading child"><a href="Monster_Constraints.AndOperator.html">AndOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.AndOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=34930><div class="accordion-heading child"><a href="Monster_Constraints.Invalid.html">Invalid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.Invalid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=6652130><div class="accordion-heading child"><a href="Monster_Constraints.IsArray.html">IsArray</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.IsArray.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=6452061><div class="accordion-heading child"><a href="Monster_Constraints.IsObject.html">IsObject</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.IsObject.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=3623644><div class="accordion-heading child"><a href="Monster_Constraints.OrOperator.html">OrOperator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.OrOperator.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=1981214><div class="accordion-heading child"><a href="Monster_Constraints.Valid.html">Valid</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Constraints.Valid.html#isValid">isValid</a></li></ul></li><li class="accordion collapsed child" id=4747659><div class="accordion-heading child"><a href="Monster_Data.Pathfinder.html">Pathfinder</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Pathfinder.html#deleteVia">deleteVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#exists">exists</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#getVia">getVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#setVia">setVia</a></li><li data-type='method'><a href="Monster_Data.Pathfinder.html#setWildCard">setWildCard</a></li></ul></li><li class="accordion collapsed child" id=2680438><div class="accordion-heading child"><a href="Monster_Data.Pipe.html">Pipe</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Pipe.html#run">run</a></li><li data-type='method'><a href="Monster_Data.Pipe.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=4378794><div class="accordion-heading child"><a href="Monster_Data.Transformer.html">Transformer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.Transformer.html#run">run</a></li><li data-type='method'><a href="Monster_Data.Transformer.html#setCallback">setCallback</a></li></ul></li><li class="accordion collapsed child" id=9553355><div class="accordion-heading child"><a href="Monster_DOM.Assembler.html">Assembler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Assembler.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster_DOM.Assembler.html#getAttributePrefix">getAttributePrefix</a></li><li data-type='method'><a href="Monster_DOM.Assembler.html#setAttributePrefix">setAttributePrefix</a></li></ul></li><li class="accordion collapsed child" id=1204467><div class="accordion-heading child"><a href="Monster_DOM.CustomControl.html">CustomControl</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.CustomControl.html#checkValidity">checkValidity</a></li><li data-type='method'><a href="Monster_DOM.CustomControl.html#reportValidity">reportValidity</a></li><li data-type='method'><a href="Monster_DOM.CustomControl.html#setFormValue">setFormValue</a></li><li data-type='method'><a href="Monster_DOM.CustomControl.html#setValidity">setValidity</a></li></ul></li><li class="accordion collapsed child" id=18293><div class="accordion-heading child"><a href="Monster_DOM.CustomElement.html">CustomElement</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getCSSStyleSheet">getCSSStyleSheet</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#.getTag">getTag</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#adoptedCallback">adoptedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#assembleMethodSymbol">assembleMethodSymbol</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#attachObserver">attachObserver</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#attributeChangedCallback">attributeChangedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#connectedCallback">connectedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#containsObserver">containsObserver</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#detachObserver">detachObserver</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#disconnectedCallback">disconnectedCallback</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#getOption">getOption</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#initMethodSymbol">initMethodSymbol</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#setOption">setOption</a></li><li data-type='method'><a href="Monster_DOM.CustomElement.html#setOptions">setOptions</a></li></ul></li><li class="accordion collapsed child" id=8010930><div class="accordion-heading child"><a href="Monster_DOM.Template.html">Template</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Template.html#createDocumentFragment">createDocumentFragment</a></li><li data-type='method'><a href="Monster_DOM.Template.html#getTemplateElement">getTemplateElement</a></li></ul></li><li class="accordion collapsed child" id=3176623><div class="accordion-heading child"><a href="Monster_DOM.Theme.html">Theme</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Theme.html#getName">getName</a></li></ul></li><li class="accordion collapsed child" id=2193327><div class="accordion-heading child"><a href="Monster_DOM.Updater.html">Updater</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.Updater.html#disableEventProcessing">disableEventProcessing</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#enableEventProcessing">enableEventProcessing</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#run">run</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#setCallback">setCallback</a></li><li data-type='method'><a href="Monster_DOM.Updater.html#setEventTypes">setEventTypes</a></li></ul></li><li class="accordion collapsed child" id=6055885><div class="accordion-heading child"><a href="Monster_I18n.Locale.html">Locale</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.Locale.html#getMap">getMap</a></li><li data-type='method'><a href="Monster_I18n.Locale.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=5910153><div class="accordion-heading child"><a href="Monster_I18n.Provider.html">Provider</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.Provider.html#getTranslations">getTranslations</a></li></ul></li><li class="accordion collapsed child" id=9104930><div class="accordion-heading child"><a href="Monster_I18n.Translations.html">Translations</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.Translations.html#assignTranslations">assignTranslations</a></li><li data-type='method'><a href="Monster_I18n.Translations.html#getPluralRuleText">getPluralRuleText</a></li><li data-type='method'><a href="Monster_I18n.Translations.html#getText">getText</a></li><li data-type='method'><a href="Monster_I18n.Translations.html#setText">setText</a></li></ul></li><li class="accordion collapsed child" id=332640><div class="accordion-heading child"><a href="Monster_I18n_Providers.Fetch.html">Fetch</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n_Providers.Fetch.html#getTranslations">getTranslations</a></li></ul></li><li class="accordion collapsed child" id=440372><div class="accordion-heading child"><a href="Monster_Logging.Handler.html">Handler</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.Handler.html#getLogLevel">getLogLevel</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#log">log</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setAll">setAll</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setDebug">setDebug</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setError">setError</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setFatal">setFatal</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setInfo">setInfo</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setLogLevel">setLogLevel</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setOff">setOff</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setTrace">setTrace</a></li><li data-type='method'><a href="Monster_Logging.Handler.html#setWarn">setWarn</a></li></ul></li><li class="accordion collapsed child" id=192307><div class="accordion-heading child"><a href="Monster_Logging.LogEntry.html">LogEntry</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.LogEntry.html#getArguments">getArguments</a></li><li data-type='method'><a href="Monster_Logging.LogEntry.html#getLogLevel">getLogLevel</a></li></ul></li><li class="accordion collapsed child" id=3887887><div class="accordion-heading child"><a href="Monster_Logging.Logger.html">Logger</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Logging.Logger.html#addHandler">addHandler</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#getLabel">getLabel</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#getLevel">getLevel</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logDebug">logDebug</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logError">logError</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logFatal">logFatal</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logInfo">logInfo</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logTrace">logTrace</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#logWarn">logWarn</a></li><li data-type='method'><a href="Monster_Logging.Logger.html#removeHandler">removeHandler</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Logging_Handler.ConsoleHandler.html">ConsoleHandler</a></li><li class="accordion collapsed child" id=2187108><div class="accordion-heading child"><a href="Monster_Text.Formatter.html">Formatter</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Text.Formatter.html#format">format</a></li><li data-type='method'><a href="Monster_Text.Formatter.html#setMarker">setMarker</a></li></ul></li><li class="accordion collapsed child" id=1391876><div class="accordion-heading child"><a href="Monster_Types.Base.html">Base</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Base.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=3297396><div class="accordion-heading child"><a href="Monster_Types.BaseWithOptions.html">BaseWithOptions</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.BaseWithOptions.html#getOption">getOption</a></li></ul></li><li class="accordion collapsed child" id=3008939><div class="accordion-heading child"><a href="Monster_Types.ID.html">ID</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ID.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=6643139><div class="accordion-heading child"><a href="Monster_Types.Observer.html">Observer</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Observer.html#addTag">addTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#getTags">getTags</a></li><li data-type='method'><a href="Monster_Types.Observer.html#hasTag">hasTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#removeTag">removeTag</a></li><li data-type='method'><a href="Monster_Types.Observer.html#update">update</a></li></ul></li><li class="accordion collapsed child" id=1727148><div class="accordion-heading child"><a href="Monster_Types.ObserverList.html">ObserverList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ObserverList.html#attach">attach</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#contains">contains</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#detach">detach</a></li><li data-type='method'><a href="Monster_Types.ObserverList.html#notify">notify</a></li></ul></li><li class="accordion collapsed child" id=9056785><div class="accordion-heading child"><a href="Monster_Types.ProxyObserver.html">ProxyObserver</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.ProxyObserver.html#attachObserver">attachObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#containsObserver">containsObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#detachObserver">detachObserver</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#getRealSubject">getRealSubject</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#getSubject">getSubject</a></li><li data-type='method'><a href="Monster_Types.ProxyObserver.html#notifyObservers">notifyObservers</a></li></ul></li><li class="accordion collapsed child" id=1045881><div class="accordion-heading child"><a href="Monster_Types.Queue.html">Queue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Queue.html#add">add</a></li><li data-type='method'><a href="Monster_Types.Queue.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.Queue.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster_Types.Queue.html#peek">peek</a></li><li data-type='method'><a href="Monster_Types.Queue.html#poll">poll</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Types.RandomID.html">RandomID</a></li><li class="accordion collapsed child" id=6955049><div class="accordion-heading child"><a href="Monster_Types.Stack.html">Stack</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Stack.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.Stack.html#isEmpty">isEmpty</a></li><li data-type='method'><a href="Monster_Types.Stack.html#peek">peek</a></li><li data-type='method'><a href="Monster_Types.Stack.html#pop">pop</a></li><li data-type='method'><a href="Monster_Types.Stack.html#push">push</a></li></ul></li><li class="accordion collapsed child" id=2916222><div class="accordion-heading child"><a href="Monster_Types.TokenList.html">TokenList</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.TokenList.html#add">add</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#contains">contains</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#entries">entries</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#forEach">forEach</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#getIterator">getIterator</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#remove">remove</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#replace">replace</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#Symbol.iterator">Symbol.iterator</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#toggle">toggle</a></li><li data-type='method'><a href="Monster_Types.TokenList.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=1932140><div class="accordion-heading child"><a href="Monster_Types.UniqueQueue.html">UniqueQueue</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.UniqueQueue.html#add">add</a></li><li data-type='method'><a href="Monster_Types.UniqueQueue.html#clear">clear</a></li><li data-type='method'><a href="Monster_Types.UniqueQueue.html#poll">poll</a></li></ul></li><li class="accordion collapsed child" id=3571928><div class="accordion-heading child"><a href="Monster_Types.Version.html">Version</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.Version.html#compareTo">compareTo</a></li><li data-type='method'><a href="Monster_Types.Version.html#toString">toString</a></li></ul></li><li class="accordion collapsed child" id=7360420><div class="accordion-heading child"><a href="Monster_Util.Comparator.html">Comparator</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Util.Comparator.html#equal">equal</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#greaterThan">greaterThan</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#greaterThanOrEqual">greaterThanOrEqual</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#lessThan">lessThan</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#lessThanOrEqual">lessThanOrEqual</a></li><li data-type='method'><a href="Monster_Util.Comparator.html#reverse">reverse</a></li></ul></li></ul> </div><div class="accordion collapsed" id="6018683" > <h3 class="accordion-heading">Namespaces<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion collapsed child" id=3931461><div class="accordion-heading child"><a href="global.html#Monster">Monster</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="global.html#Monster#.assignToNamespace">assignToNamespace</a></li><li data-type='method'><a href="global.html#Monster#.getVersion">getVersion</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Constraints.html">Monster/Constraints</a></li><li class="accordion collapsed child" id=4620978><div class="accordion-heading child"><a href="Monster_Data.html">Monster/Data</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Data.html#.Diff">Diff</a></li><li data-type='method'><a href="Monster_Data.html#.extend">extend</a></li></ul></li><li class="accordion collapsed child" id=3755969><div class="accordion-heading child"><a href="Monster_DOM.html">Monster/DOM</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_DOM.html#.addAttributeToken">addAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.addToObjectLink">addToObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.clearAttributeTokens">clearAttributeTokens</a></li><li data-type='method'><a href="Monster_DOM.html#.containsAttributeToken">containsAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.findClosestObjectLink">findClosestObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.findDocumentTemplate">findDocumentTemplate</a></li><li data-type='method'><a href="Monster_DOM.html#.findTargetElementFromEvent">findTargetElementFromEvent</a></li><li data-type='method'><a href="Monster_DOM.html#.fireEvent">fireEvent</a></li><li data-type='method'><a href="Monster_DOM.html#.getDocument">getDocument</a></li><li data-type='method'><a href="Monster_DOM.html#.getDocumentFragmentFromString">getDocumentFragmentFromString</a></li><li data-type='method'><a href="Monster_DOM.html#.getLinkedObjects">getLinkedObjects</a></li><li data-type='method'><a href="Monster_DOM.html#.getLocaleOfDocument">getLocaleOfDocument</a></li><li data-type='method'><a href="Monster_DOM.html#.getWindow">getWindow</a></li><li data-type='method'><a href="Monster_DOM.html#.hasObjectLink">hasObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.registerCustomElement">registerCustomElement</a></li><li data-type='method'><a href="Monster_DOM.html#.removeAttributeToken">removeAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.removeObjectLink">removeObjectLink</a></li><li data-type='method'><a href="Monster_DOM.html#.replaceAttributeToken">replaceAttributeToken</a></li><li data-type='method'><a href="Monster_DOM.html#.toggleAttributeToken">toggleAttributeToken</a></li></ul></li><li class="accordion collapsed child" id=7002651><div class="accordion-heading child"><a href="Monster_I18n.html">Monster/I18n</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_I18n.html#.parseLocale">parseLocale</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_I18n_Providers.html">Monster/I18n/Providers</a></li><li class="accordion-list" id=""><a href="Monster_Logging.html">Monster/Logging</a></li><li class="accordion-list" id=""><a href="Monster_Logging_Handler.html">Monster/Logging/Handler</a></li><li class="accordion collapsed child" id=23242><div class="accordion-heading child"><a href="Monster_Math.html">Monster/Math</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Math.html#.random">random</a></li></ul></li><li class="accordion-list" id=""><a href="Monster_Text.html">Monster/Text</a></li><li class="accordion collapsed child" id=2070146><div class="accordion-heading child"><a href="Monster_Types.html">Monster/Types</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Types.html#.getGlobal">getGlobal</a></li><li data-type='method'><a href="Monster_Types.html#.getGlobalFunction">getGlobalFunction</a></li><li data-type='method'><a href="Monster_Types.html#.getGlobalObject">getGlobalObject</a></li><li data-type='method'><a href="Monster_Types.html#.isArray">isArray</a></li><li data-type='method'><a href="Monster_Types.html#.isBoolean">isBoolean</a></li><li data-type='method'><a href="Monster_Types.html#.isFunction">isFunction</a></li><li data-type='method'><a href="Monster_Types.html#.isInstance">isInstance</a></li><li data-type='method'><a href="Monster_Types.html#.isInteger">isInteger</a></li><li data-type='method'><a href="Monster_Types.html#.isIterable">isIterable</a></li><li data-type='method'><a href="Monster_Types.html#.isObject">isObject</a></li><li data-type='method'><a href="Monster_Types.html#.isPrimitive">isPrimitive</a></li><li data-type='method'><a href="Monster_Types.html#.isString">isString</a></li><li data-type='method'><a href="Monster_Types.html#.isSymbol">isSymbol</a></li><li data-type='method'><a href="Monster_Types.html#.typeOf">typeOf</a></li><li data-type='method'><a href="Monster_Types.html#.validateArray">validateArray</a></li><li data-type='method'><a href="Monster_Types.html#.validateBoolean">validateBoolean</a></li><li data-type='method'><a href="Monster_Types.html#.validateFunction">validateFunction</a></li><li data-type='method'><a href="Monster_Types.html#.validateInstance">validateInstance</a></li><li data-type='method'><a href="Monster_Types.html#.validateInteger">validateInteger</a></li><li data-type='method'><a href="Monster_Types.html#.validateIterable">validateIterable</a></li><li data-type='method'><a href="Monster_Types.html#.validateObject">validateObject</a></li><li data-type='method'><a href="Monster_Types.html#.validatePrimitive">validatePrimitive</a></li><li data-type='method'><a href="Monster_Types.html#.validateString">validateString</a></li><li data-type='method'><a href="Monster_Types.html#.validateSymbol">validateSymbol</a></li></ul></li><li class="accordion collapsed child" id=8458803><div class="accordion-heading child"><a href="Monster_Util.html">Monster/Util</a><svg><use xlink:href="#down-icon"></use></svg></div><ul class='methods accordion-content'><li data-type='method'><a href="Monster_Util.html#.clone">clone</a></li><li data-type='method'><a href="Monster_Util.html#.deepFreeze">deepFreeze</a></li></ul></li></ul> </div><div class="accordion collapsed" id="9619879" > <h3 class="accordion-heading">Global<svg><use xlink:href="#down-icon"></use></svg></h3><ul class="accordion-content"><li class="accordion-list" id=""><a href="global.html#assembleMethodSymbol">assembleMethodSymbol</a></li><li class="accordion-list" id=""><a href="global.html#buildMap">buildMap</a></li><li class="accordion-list" id=""><a href="global.html#DEFAULT_LANGUAGE">DEFAULT_LANGUAGE</a></li><li class="accordion-list" id=""><a href="global.html#findClosestByAttribute">findClosestByAttribute</a></li><li class="accordion-list" id=""><a href="global.html#getDocumentTheme">getDocumentTheme</a></li><li class="accordion-list" id=""><a href="global.html#initMethodSymbol">initMethodSymbol</a></li><li class="accordion-list" id=""><a href="global.html#localeStringSymbol">localeStringSymbol</a></li><li class="accordion-list" id=""><a href="global.html#propertiesSymbol">propertiesSymbol</a></li></ul> </div></div>
      
        <div class="navbar-resize" id="navbar-resize">
          <div class="resize-dots-container">
            <div class="dots"></div>
            <div class="dots"></div>
            <div class="dots"></div>
          </div> 
        </div>
      

    </nav>
    <div class="navbar-ham" id="navbar-ham">
      <div>
        <div class="first"></div>
        <div class="second"></div>
        <div class="third"></div>
      </div>
    </div>

    <div id="main" class="main-content">
      
      <h1 id='page-title' class="page-title">
        CustomElement
      </h1>
      

      




<section>


<header>
    
        
            <h2>
        
            <span class="ancestors"><a href="Monster_DOM.html">Monster/DOM</a>.</span>
        
        CustomElement
        
        </h2>
        
        
            <div class="class-description"><p>To define a new HTML element we need the power of CustomElement</p>
<p>IMPORTANT: after defining a <code>CustomElement</code>, the <code>registerCustomElement</code> method must be called
with the new class name. only then will the tag defined via the <code>getTag</code> method be made known to the DOM.</p>
<p>You can create the object via the monster namespace <code>new Monster.DOM.CustomElement()</code>.</p>
<pre class="prettyprint source"><code>&lt;script type=&quot;module&quot;>
import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/customelement.js';
console.log(new Monster.DOM.CustomElement())
&lt;/script>
</code></pre>
<p>Alternatively, you can also integrate this function individually.</p>
<pre class="prettyprint source"><code>&lt;script type=&quot;module&quot;>
import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.15.0/dist/modules/dom/customelement.js';
console.log(new CustomElement())
&lt;/script>
</code></pre>
<h2>Styling</h2>
<p>For optimal display of custom-elements the pseudo-class :defined can be used.</p>
<p>To prevent the custom elements from being displayed and flickering until the control is registered, it is recommended to create a css directive.</p>
<p>In the simplest case, you can simply hide the control.</p>
<pre class="prettyprint source"><code>&lt;style>

my-custom-element:not(:defined) {
    display: none;
}

my-custom-element:defined {
    display: flex;
}

&lt;/style>
</code></pre>
<p>Alternatively you can also display a loader</p>
<pre class="prettyprint source"><code>my-custom-element:not(:defined) {
           display: flex;
           box-shadow: 0 4px 10px 0 rgba(33, 33, 33, 0.15);
           border-radius: 4px;
           height: 200px;
           position: relative;
           overflow: hidden;
       }

my-custom-element:not(:defined)::before {
           content: '';
           display: block;
           position: absolute;
           left: -150px;
           top: 0;
           height: 100%;
           width: 150px;
           background: linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%);
           animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
       }</code></pre></div>
        
    
</header>


<article>
    <div class="container-overview">
    
        
    
    
        <h2>Constructor</h2>
    

    <h4 class="name" id="CustomElement">
        <a href="#CustomElement">#</a>
        <span class="type-signature"></span>new CustomElement<span class="signature">()</span><span class="type-signature"></span>
    </h4>

    



    <div class="description">
        <p>A new object is created. First the <code>initOptions</code> method is called. Here the
options can be defined in derived classes. Subsequently, the shadowRoot is initialized.</p>
    </div>















<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.7.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    
        <div class="details-item-container">
            <dt class="tag-copyright">Copyright:</dt>
            <dd class="tag-copyright"><ul class="dummy"><li>schukai GmbH</li></ul></dd>
        </div>
    

    

    

    
    
    

    
        <div class="details-item-container">
            <dt class="tag-see">See:</dt>
            <dd class="tag-see">
                <ul>
                    <li><a href="https://github.com/WICG/webcomponents">https://github.com/WICG/webcomponents</a></li>
                
                    <li><a href="https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements">https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements</a></li>
                </ul>
            </dd>
        </div>
    

    
</dl>













    <div class="method-member-container mt-20">
    <strong>Throws:</strong>
    
        

<dl>
    <dt>
        <div class="param-desc">
        <p>the options attribute does not contain a valid json definition.</p>
        </div>
    </dt>
    <dd></dd>
    <dt>
        <dl>
            <dt>
                Type
            </dt>
            <dd>
                
<span class="param-type">Error</span>


            </dd>
        </dl>
    </dt>
    <dd></dd>
</dl>


    
    </div>





    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Example</strong>
        
        <div class="rel">
    <pre class="prettyprint"><code>// In the example the the user can use his own template by creating a template in the DOM with the ID `my-custom-element`.
// You can also specify a theme (for example `mytheme`), then it will search for the ID `my-custom-element-mytheme` and
// if not available for the ID `my-custom-element`.

class MyCustomElement extends CustomElement {

   static getTag() {
       return "my-custom-element"
   }

}

// ↦ &lt;my-custom-element>&lt;/my-custom-element></code></pre>
    
    
        <form action="https://codepen.io/pen/define" method="POST" target="_blank" class="codepen-form">
            <input type="hidden" name="data" value='{"title": "Example", "js": &quot;// In the example the the user can use his own template by creating a template in the DOM with the ID `my-custom-element`.\n// You can also specify a theme (for example `mytheme`), then it will search for the ID `my-custom-element-mytheme` and\n// if not available for the ID `my-custom-element`.\n\nclass MyCustomElement extends CustomElement {\n\n   static getTag() {\n       return \&quot;my-custom-element\&quot;\n   }\n\n}\n\n// ↦ <my-custom-element></my-custom-element>&quot;, "title": "awaken the monster in you; javascript library by schukai GmbH","description": "the example ...","editors": "0012" }' />
            <input type="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1/cp-arrow-right.svg" value="Create New Pen with Prefilled Data" width="40" height="40" />
        </form>
    
    </div>

    </div>


    
    </div>

    

    

    

     

    

    
        <h3 class="subsection-title">Members</h3>

        
            
<h4 class="name" id=".observedAttributes">
    <a href="#.observedAttributes">#</a>
    <span class="type-signature">(static) </span>observedAttributes<span class="type-signature"></span>
</h4>




<div class="description">
    <p>This method determines which attributes are to be monitored by <code>attributeChangedCallback()</code>.</p>
</div>









<dl class="details">

    

    
        <div class="details-item-container">
                <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.15.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>








        
            
<h4 class="name" id="defaults">
    <a href="#defaults">#</a>
    <span class="type-signature"></span>defaults<span class="type-signature"></span>
</h4>




<div class="description">
    <table>
<thead>
<tr>
<th>option</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>shadowMode</td>
<td><code>open</code> Elements of the shadow root are accessible from JavaScript outside the root, for example using. <code>close</code> Denies access to the node(s) of a closed shadow root from JavaScript outside it</td>
</tr>
<tr>
<td>delegatesFocus</td>
<td>A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.</td>
</tr>
<tr>
<td>templates.main</td>
    <td>Main template</td>
</tr>
</tbody>
</table>
<p>Derived classes can override and extend this method as follows.</p>
<pre class="prettyprint source"><code>get defaults() {
   return Object.assign({}, super.defaults, {
       myValue:true
   });
}
</code></pre>
</div>









<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.8.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    
        <div class="details-item-container">
            <dt class="tag-see">See:</dt>
            <dd class="tag-see">
                <ul>
                    <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow">https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow</a></li>
                </ul>
            </dd>
        </div>
    

    
</dl>

    






        
    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    <h4 class="name" id=".getCSSStyleSheet">
        <a href="#.getCSSStyleSheet">#</a>
        <span class="type-signature">(static) </span>getCSSStyleSheet<span class="signature">()</span><span class="type-signature"> &rarr; {CSSStyleSheet|undefined}</span>
    </h4>

    



    <div class="description">
        <p>At this point a <code>CSSStyleSheet</code> object can be returned. If the environment does not
support a constructor, then an object can also be built using the following detour.</p>
<p>If <code>undefined</code> is returned then the shadowRoot does not get a stylesheet.</p>
<pre class="prettyprint source"><code>const doc = document.implementation.createHTMLDocument('title');

let style = doc.createElement(&quot;style&quot;);
style.innerHTML=&quot;p{color:red;}&quot;;

// WebKit Hack
style.appendChild(document.createTextNode(&quot;&quot;));
// Add the &lt;style> element to the page
doc.head.appendChild(style);
return doc.styleSheets[0];
;
</code></pre>
    </div>















<dl class="details">

    

    

    

    

    
    
    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">CSSStyleSheet</span>
|

<span class="param-type">undefined</span>


    </dd>
</dl>

            
    </div>




        
            

    

        <h4 class="name" id=".getTag">
        <a href="#.getTag">#</a>
        <span class="type-signature">(static) </span>getTag<span class="signature">()</span><span class="type-signature"> &rarr; {string}</span>
    </h4>

    



    <div class="description">
        <p>There is no check on the name by this class. the developer is responsible for assigning an appropriate tag.
if the name is not valid, registerCustomElement() will issue an error</p>
    </div>















<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.7.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>



    









    <div class="method-member-container mt-20">
    <strong>Throws:</strong>
    
        

<dl>
    <dt>
        <div class="param-desc">
        <p>the method getTag must be overwritten by the derived class.</p>
        </div>
    </dt>
    <dd></dd>
    <dt>
        <dl>
            <dt>
                Type
            </dt>
            <dd>
                
<span class="param-type">Error</span>


            </dd>
        </dl>
    </dt>
    <dd></dd>
</dl>


    
    </div>



    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">string</span>


    </dd>
</dl>

            
    </div>




        
            
    
    

    <h4 class="name" id="adoptedCallback">
        <a href="#adoptedCallback">#</a>
        <span class="type-signature"></span>adoptedCallback<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span>
    </h4>

    



    <div class="description">
        <p>The custom element has been moved into a new document (e.g. someone called document.adoptNode(el)).</p>
    </div>















<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.7.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>

    













    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">void</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="assembleMethodSymbol">
        <a href="#assembleMethodSymbol">#</a>
        <span class="type-signature"></span>assembleMethodSymbol<span class="signature">()</span><span class="type-signature"> &rarr; {CustomElement}</span>
    </h4>

    

















<dl class="details">

    

        
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.8.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">CustomElement</span>


    </dd>
</dl>

            
    </div>
    



        
            

    

    <h4 class="name" id="attachObserver">
        <a href="#attachObserver">#</a>
        <span class="type-signature"></span>attachObserver<span class="signature">(observer)</span><span class="type-signature"> &rarr; {CustomElement}</span>
    </h4>

    



    <div class="description">
        <p>attach a new observer</p>
    </div>









    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Parameters:</strong>
        

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>observer</code></td>
            

            <td class="type">
            
                
<span class="param-type">Observer</span>


            
            </td>

            

                

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>

    </div>







<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            
    

<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">CustomElement</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="attributeChangedCallback">
        <a href="#attributeChangedCallback">#</a>
        <span class="type-signature"></span>attributeChangedCallback<span class="signature">(attrName, oldVal, newVal)</span><span class="type-signature"> &rarr; {void}</span>
    </h4>

    



    <div class="description">
        <p>Called when an observed attribute has been added, removed, updated, or replaced. Also called for initial
values when an element is created by the parser, or upgraded. Note: only attributes listed in the observedAttributes
property will receive this callback.</p>
    </div>









    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Parameters:</strong>
        

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
        

        <tr>
            
                <td class="name"><code>attrName</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    

        <tr>
            
                <td class="name"><code>oldVal</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    

        <tr>
            
                <td class="name"><code>newVal</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
        </tbody>
</table>

    </div>







<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.15.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            

    
<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">void</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="connectedCallback">
        <a href="#connectedCallback">#</a>
        <span class="type-signature"></span>connectedCallback<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span>
    </h4>

    



    <div class="description">
        <p>Called every time the element is inserted into the DOM. Useful for running setup code, such as
fetching resources or rendering. Generally, you should try to delay work until this time.</p>
    </div>















<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.7.0</li></ul></dd>
        </div>
    

    

    

    

    
    
    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">void</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="containsObserver">
        <a href="#containsObserver">#</a>
        <span class="type-signature"></span>containsObserver<span class="signature">(observer)</span><span class="type-signature"> &rarr; {ProxyObserver}</span>
    </h4>

        











    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Parameters:</strong>
        

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>observer</code></td>
            

            <td class="type">
            
                
<span class="param-type">Observer</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>

    </div>







<dl class="details">
    
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">ProxyObserver</span>


    </dd>
</dl>

            
    </div>


    

        
            

    

    <h4 class="name" id="detachObserver">
        <a href="#detachObserver">#</a>
        <span class="type-signature"></span>detachObserver<span class="signature">(observer)</span><span class="type-signature"> &rarr; {CustomElement}</span>
    </h4>

    



    <div class="description">
        <p>detach a observer</p>
    </div>









    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Parameters:</strong>
        

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>observer</code></td>
            

            <td class="type">
            
                
<span class="param-type">Observer</span>


            
            </td>

            

            

                <td class="description last"></td>
        </tr>

    
    </tbody>
</table>

    </div>







<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


    <dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">CustomElement</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="disconnectedCallback">
        <a href="#disconnectedCallback">#</a>
        <span class="type-signature"></span>disconnectedCallback<span class="signature">()</span><span class="type-signature"> &rarr; {void}</span>
    </h4>

    



    <div class="description">
        <p>Called every time the element is removed from the DOM. Useful for running clean up code.</p>
    </div>















<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.7.0</li></ul></dd>
        </div>
    

    

    

    

    

    
    
    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">void</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="getOption">
        <a href="#getOption">#</a>
        <span class="type-signature"></span>getOption<span class="signature">(path, defaultValue)</span><span class="type-signature"> &rarr; {*}</span>
    </h4>

    

    

    <div class="description">
        <p>nested options can be specified by path <code>a.b.c</code></p>
    </div>









    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Parameters:</strong>
        

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>path</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    

        <tr>
            
                <td class="name"><code>defaultValue</code></td>
            

            <td class="type">
            
                
<span class="param-type">*</span>
    

            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>

    </div>







<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.10.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>







    







    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">*</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="initMethodSymbol">
        <a href="#initMethodSymbol">#</a>
        <span class="type-signature"></span>initMethodSymbol<span class="signature">()</span><span class="type-signature"> &rarr; {CustomElement}</span>
    </h4>

    

















<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.8.0</li></ul></dd>
        </div>
    
    
    

    

    

    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">CustomElement</span>


    </dd>
</dl>

            
    </div>




        
            
    
    

    <h4 class="name" id="setOption">
        <a href="#setOption">#</a>
        <span class="type-signature"></span>setOption<span class="signature">(path, value)</span><span class="type-signature"> &rarr; {CustomElement}</span>
    </h4>

    



    <div class="description">
        <p>Set option and inform elements</p>
    </div>









    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Parameters:</strong>
        

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>path</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type">*</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>

    </div>







<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.14.0</li></ul></dd>
        </div>
    

    

    

    

    

    

    

    

    

    

    

    

    

    
    
    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">CustomElement</span>


    </dd>
</dl>

            
    </div>




        
            

    

    <h4 class="name" id="setOptions">
        <a href="#setOptions">#</a>
        <span class="type-signature"></span>setOptions<span class="signature">(options)</span><span class="type-signature"> &rarr; {CustomElement}</span>
    </h4>

    











    <div class="method-member-container flex flex-col w-100 overflow-auto mt-20">
        <strong>Parameters:</strong>
        

<table class="params">
    <thead>
        <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>
|

<span class="param-type">object</span>


            
            </td>

            

            

            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>

    </div>







<dl class="details">

    

    
        <div class="details-item-container">
            <dt class="tag-since">Since:</dt>
            <dd class="tag-since"><ul class="dummy"><li>1.15.0</li></ul></dd>
        </div>
    

    

    

    
    
    

    

    

    

    

    

    

    

    

    

    
</dl>















    <div class="method-member-container mt-20">
    <strong>Returns:</strong>
        
            


<dl class="param-type">
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">CustomElement</span>


    </dd>
</dl>

            
    </div>




        
    

    

    
</article>

    </section>




    </div>

    <footer class="footer" id="footer">
      <a href='https://about.schukai.com/de/impressum/'>Imprint</a>
    </footer>

    <script src="scripts/third-party/prettify.js"></script>
    <script src="scripts/third-party/lang-css.js"></script>
    <script type="text/javascript" src="scripts/misc.js"></script>

    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/fix-code-block.js"></script>
    <script src="scripts/fix-navbar.js"></script>
    

    

    
      <script src="scripts/resize.js"></script>
      <script type="text/javascript">
        var option = {"min":"300","max":"600"}
        setupResizeOptions(option)
      </script>
    

    

    
    <script type="text/javascript">
    var option = JSON.parse('{"options":{}}')
      console.log(option)
      document.addEventListener("DOMContentLoaded", function () {
        OverlayScrollbars(document.querySelectorAll('body'), option.option || {});
      });
    </script>
    


  </body>

</html>