According to the error message, it seems that the variable isDigitizePolygonDisabled is being passed as a string instead of a boolean. To rectify this issue, you should bind the attribute using the :disabled directive.

You can do it like this :

<button
  id="idDigitizePolygonBtn"
  class="digitizePolygonBtn"
  :disabled="isDigitizePolygonDisabled"
>
  <slot></slot>
</button>

In your script file :

export default defineComponent({
  props: {
    isDigitizePolygonDisabled: {
      type: Boolean,
      required: true
    }
  }
});

Condensed Summary

A comprehensive response covering imports, variable passing, and slot/template usage has been provided with essential information highlighted at the top.

Assigning Different Value Types

• <button disabled="false">

  --- string value: "false"

• <button :disabled="false">

  --- boolean value: false
  
  

• <button testProp="123">

  --- string value: "123"

• <button :testProp="123">

  --- number value: 123
  
  

• <button testProp="text">

  --- string value: "text"

• <button :testProp="'text'">

  --- string value: "text"
  
  

• <button testProp="[1, 2, 3]">

  --- string value: "[1, 2, 3]"

• <button :testProp="[1, 2, 3]">

  --- array value: [1, 2, 3]
  
  Utilizing a variable like const isDisabled = false;, then:

• <button disabled="isDisabled">

  --- string value: "isDisabled"

• <button :disabled="isDisabled">

  --- boolean value (from variable): false

To pass non-string or variables to attributes, especially boolean values, it's crucial to prepend a colon before the variable. This maintains the type integrity of the passed value.

Providing Properties to Child Elements

• <ChildrenElement propertyName="propertyValue" />

The usage of a colon is necessary for previous type assignments scenario... Referencing the example, text propertyValue was passed as a string to property named propertyName. Correctly importing ChildrenElement and defining its props are vital (explained later).

Integration of <slot> and <template>

By using , you establish a template that allows HTML code customization post child element importation. This approach suits universal component creation where individual elements require diverse utilization options.

Solution # 1, Declared as property

• Vue props declaration - Vue Docs

Options API

Introduction of defineComponent() in Options API specifically when incorporating TypeScript.

• Usage of defineComponent() - StackOverflow Answer

In Options API, component properties can be defined within props attribute requiring data type specification during component declaration. Default or mandatory values can be set accordingly. The showcased example highlights a default value of true for illustrative purposes.

ChildrenButton.vue Component Structure

<template>
  <div>
    <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled='isDigitizePolygonDisabled'>
      Test Button
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    isDigitizePolygonDisabled: { 
      type: Boolean,
      default: true,
    }
  }
})
</script>

// Vue related script

// App initialization
const { createApp } = Vue

const app = createApp({
  props: {
    isDigitizePolygonDisabled: { 
      type: Boolean,
      default: true,
    }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>

Importing Children Component into Parent Element (Options API)

• Component Local Registration - Vue Docs

If a button-containing component is labeled ChildrenButton, inclusion in the parent element is demonstrated as follows:

ParentElement.vue Component Layout

<template>
  <div>
    <ChildrenButton :isDigitizePolygonDisabled="false" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ChildrenButton from './path/to/ChildrenButton.vue'

export default defineComponent({
  components: {
    ChildrenButton,
  }
})
</script>

Composition API Approach

In Composition API, defineProps() function defines properties in a similar manner to the Options API example used previously.

• How to Use defineProps() - StackOverflow Answer
• defineProps() - Vue Docs

Structure of ChildrenButton.vue Component

<template>
  <div>
    <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled='isDigitizePolygonDisabled'>
      Test Button
    </button>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  isDigitizePolygonDisabled: { 
    type: Boolean,
    default: true,
  }
})
</script>

// Necessary Vue script

// App initialization
const { createApp, defineProps } = Vue

const app = createApp({
  setup() {
    const props = defineProps({
     isDigitizePolygonDisabled: { 
        type: Boolean,
        default: true,
      }
    })
    
    return { props }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>

Child Component Importation into Parent Element (Composition API Method)

• Component Local Registration - Vue Docs

For a button-inclusive component termed ChildrenButton, integration into the parent element is exemplified below:

Design of ParentElement.vue Component

<template>
  <div>
    <ChildrenButton :isDigitizePolygonDisabled="false" />
  </div>
</template>

<script lang="ts" setup>
import ChildrenButton from './path/to/ChildrenButton.vue'
</script>

Solution # 2, Characterized as reactive variable

Instead of setting as a property, an alternative involves declaring as a fixed reactive variable, preventing external direct assignment of variable value.

Options API Perspective

In the Options API context, such variables can be declared within the data() property.

• data() - Vue Docs

// Relevant Vue script

// App initialization
const { createApp } = Vue

const app = createApp({
  data() {
    return {
      isDigitizePolygonDisabled: true,
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>

Composition API Angle

Within Composition API, access to reactive() and ref() functions exists. Their functionalities are effectively explained.

• ref() - Vue Docs (reactive core)
• reactive() - Vue Docs (reactive core)

// Essential Vue script

// App initialization
const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const isDigitizePolygonDisabled = ref(true)
    
    return { isDigitizePolygonDisabled }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>

<div id="app">
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled='isDigitizePolygonDisabled'>
    Test Button
  </button>
</div>

slot and template Integration on Vue

Since <slot> relevance was expressed in your query, here's an illustration demonstrating proper utilization within child-parent component interaction.

Prior details on imports discussed earlier apply, while <slot> and <template> employment consistency remains unchanged between Options API and Composition API, with Options API example being showcased.

• Proper Usage of <slot> - Vue Docs

Multiple <slot>s can be accommodated within a single component with assignable names. It is imperative to differentiate multiple <slot>s distinctly. Overwriting a through a <template> from parent element is viable. An unnamed <slot> maps to an unnamed <template>, with default name as default. Renaming a <slot> necessitates specifying said <slot> name within <template>. Concurrent override of multiple <slot>s is feasible as depicted in the following example.

Layout of ChildrenButton.vue Component

<template>
  <div>
    <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled='isDigitizePolygonDisabled'>
      <slot>
        <strong>Default HTML code here!</strong> <!-- In absence of a <template>, content of <slot> will appear by default, overridable by a declared <template>. -->
      </slot>
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    isDigitizePolygonDisabled: { 
      type: Boolean,
      default: true,
    }
  }
})
</script>

Design of ParentElement.vue Component Structure

<template>
  <div>
    <!-- 1. Content of <slot> now shown without <template> -->
    <ChildrenButton :isDigitizePolygonDisabled="false" />

    <!-- 2. Content of current <template> shown with <template> -->
    <ChildrenButton :isDigitizePolygonDisabled="false">
      <template>New unique HTML code here</template>
    </ChildrenButton>

    <!-- 3. Another content displayed with <template> (different) -->
    <ChildrenButton :isDigitizePolygonDisabled="false">
      <template>
        <span style="color: red;">New unique HTML code here</span>
      </template>
    </ChildrenButton>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ChildrenButton from './path/to/ChildrenButton.vue'

export default defineComponent({
  components: {
    ChildrenButton,
  }
})
</script>

When working with Vue, it's important to correctly bind boolean attributes like disabled using the v-bind directive (or shorthand :). This ensures that the attribute is bound to an expression.

If you attempt to bind the disabled attribute incorrectly, Vue may interpret it as trying to set a string like 'isDigitizePolygonDisabled' as the value for disabled, which leads to an error message.

To resolve this issue, your final code should look like this:

<template>
  <button id="idDigitizePolygonBtn" class="digitizePolygonBtn" :disabled="isButtonDisabled">
    <slot></slot>
  </button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    props: {
        isDigitizePolygonDisabled: { 
            type: Boolean,
            required: true
        },
    },
    setup(props) {
        
        // Simply return the prop for now
        return {
            isButtonDisabled: props.isDigitizePolygonDisabled
        }
    }
})
</script>

I find it easier to use defineComponent and setup in this situation since they are more straightforward to work with.